Pagination

Organism

Sayfa navigasyonu. Ellipsis ile büyük sayfa sayılarını kısaltır. aria-label ve aria-current="page" ile erişilebilir.

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

Navigation