Pagination

Organism

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

Preview

Code

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

Preview

Code

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

Preview

Code

<Pagination page={page} totalPages={20} onPageChange={setPage} showFirstLast showJumpTo />

Pagination

Default

Sizes

First / Last + Jump to page