Pagination

Organism

Page navigation control. Collapses large page counts with ellipsis; accessible via aria-label and aria-current="page".

Default

Preview
Code
const [page, setPage] = useState(1);
<Pagination page={page} totalPages={10} onPageChange={setPage} />

Sizes

Preview
Code
<Pagination page={page} totalPages={10} onPageChange={setPage} size="sm" />
<Pagination page={page} totalPages={10} onPageChange={setPage} size="lg" />

First / Last + Jump to page

Preview
Code
<Pagination page={page} totalPages={20} onPageChange={setPage} showFirstLast showJumpTo />
Sourcemodules/ui/Pagination.tsx