Pagination - Component Showcase

Default

With Ellipsis

Disabled States

First page (Previous disabled)

Last page (Next disabled)

Usage

<twig:Pagination>
    <twig:PaginationItem href="/page/1">
        <twig:ux:icon name="lucide:chevron-left" class="size-4" />
        Previous
    </twig:PaginationItem>
    <twig:PaginationItem href="/page/1">1</twig:PaginationItem>
    <twig:PaginationItem href="/page/2" :active="true">2</twig:PaginationItem>
    <twig:PaginationItem href="/page/3">3</twig:PaginationItem>
    <twig:PaginationItem href="/page/3">
        Next
        <twig:ux:icon name="lucide:chevron-right" class="size-4" />
    </twig:PaginationItem>
</twig:Pagination>

<twig:PaginationItem :disabled="true">...</twig:PaginationItem>