Pagination

Navigation controls for splitting content across multiple pages

Basic

Basic Pagination

Preview Code Auto

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'
)

Disabled Pagination

Preview Code Auto

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'
)

Radio inputs

Preview Code Auto

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'
)

Sizes

Size Variations

Preview Code Auto

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

Styled Variations

Preview Code Auto

Div(
    Button('«', cls='join-item btn'),
    Button('Page 22', cls='join-item btn'),
    Button('»', cls='join-item btn'),
    cls='join'
)

Next/Prev Outline

Preview Code Auto

Div(
    Button('Previous page', cls='join-item btn btn-outline'),
    Button('Next', cls='join-item btn btn-outline'),
    cls='join grid grid-cols-2'
)

Class Reference

Class	Type	Description
join	Component	Container for grouping items
join-item	Part	Item inside join. Can be a button, input, etc.
join-vertical	Direction	Show items vertically
join-horizontal	Direction	Show items horizontally

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo