Pagination for navigating between pages. Supports Numeric and Text types, configurable placement, mobile layout, and RTL.
Loading demo: pagination-real-world
npx sdaia-ui@latest add pagination
import { Pagination } from "@/components/ui/pagination"<Pagination type="numeric" placement="center" />Pagination with numbered page buttons.
Loading demo: pagination-numeric
Pagination with previous and next text labels instead of numbers.
Loading demo: pagination-text
Pagination aligned to the start, center, or end of its container.
Loading demo: pagination-placement
Compact pagination layout optimised for mobile screens.
Loading demo: pagination-mobile
Props for the Pagination component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'numeric' | 'text' | 'button' | "numeric" | optional |
placement | 'start' | 'center' | 'end' | "start" | optional |
mobile | boolean | false | optional |
rtl | boolean | false | optional |
page | number | mobile ? 2 : 3 | optional |
totalPages | number | mobile ? 8 : 12 | optional |
onPageChange | (page: number) => void | - | optional |
fullWidth | boolean | false | optional |