Pagination

Navigasi halaman data dengan prev/next, active page, dan smart ellipsis untuk total halaman besar.

import { Pagination } from "@naraya/ui";

Gunakan Pagination ketika data dibagi ke beberapa halaman untuk menjaga performa dan keterbacaan list/table.

Default

<Pagination current={2} total={8} onChange={setPage} />

Controlled

Current page: 6

const [current, setCurrent] = useState(6);
<Pagination current={current} total={18} onChange={setCurrent} />

More siblings

<Pagination current={10} total={30} siblings={2} onChange={setPage} />

Prop	Type	Default	Description
current*	`number`	—	Halaman aktif (1-based).
total*	`number`	—	Total halaman.
onChange*	`(page: number) => void`	—	Dipanggil saat user pindah halaman.
siblings	`number`	`1`	Jumlah halaman tetangga di sekitar current.
className	`string`	—	Class tambahan wrapper.

--bg-surface

Button background

--border-subtle

Button border

--color-primary

Active page highlight

--text-main

Page label color