<a id="pagination"></a>

## Pagination  
**Category**: Navigation
Navigation controls for splitting content across multiple pages
### Examples

#### Basic Pagination  
```python
Div(
    Button('1', cls='join-item btn'),
    Button('2', cls='join-item btn btn-active'),
    Button('3', cls='join-item btn'),
    Button('4', cls='join-item btn'),
    cls='join'
)
```

#### Size Variations  
```python
Div(
    Button("1", cls="join-item btn btn-xs"),
    Button("2", cls="join-item btn btn-xs btn-active"),
    Button("3", cls="join-item btn btn-xs"),
    Button("4", cls="join-item btn btn-xs"),
    cls="join"
),
Div(
    Button("1", cls="join-item btn btn-sm"),
    Button("2", cls="join-item btn btn-sm btn-active"),
    Button("3", cls="join-item btn btn-sm"),
    Button("4", cls="join-item btn btn-sm"),
    cls="join mt-4"
),
Div(
    Button("1", cls="join-item btn btn-md"),
    Button("2", cls="join-item btn btn-md btn-active"),
    Button("3", cls="join-item btn btn-md"),
    Button("4", cls="join-item btn btn-md"),
    cls="join mt-4"
),
Div(
    Button("1", cls="join-item btn btn-lg"),
    Button("2", cls="join-item btn btn-lg btn-active"),
    Button("3", cls="join-item btn btn-lg"),
    Button("4", cls="join-item btn btn-lg"),
    cls="join mt-4"
)
```

#### Styled Variations  
```python
Div(
    Button('«', cls='join-item btn'),
    Button('Page 22', cls='join-item btn'),
    Button('»', cls='join-item btn'),
    cls='join'
)
```

#### Disabled Pagination  
```python
Div(
    Button('1', cls='join-item btn'),
    Button('2', cls='join-item btn'),
    Button('...', cls='join-item btn btn-disabled'),
    Button('99', cls='join-item btn'),
    Button('100', cls='join-item btn'),
    cls='join'
)
```

#### Next/Prev Outline  
```python
Div(
    Button('Previous page', cls='join-item btn btn-outline'),
    Button('Next', cls='join-item btn btn-outline'),
    cls='join grid grid-cols-2'
)
```

#### Radio inputs  
```python
Div(
    Input(type='radio', name='options', aria_label='1', checked='checked', cls='join-item btn btn-square'),
    Input(type='radio', name='options', aria_label='2', cls='join-item btn btn-square'),
    Input(type='radio', name='options', aria_label='3', cls='join-item btn btn-square'),
    Input(type='radio', name='options', aria_label='4', cls='join-item btn btn-square'),
    cls='join'
)
```