Examples
Interactive pagination bar. Click page numbers or prev/next arrows to navigate. All examples are fully interactive.
Default pagination
A full pagination bar showing item count, page numbers with ellipsis, and prev/next arrows. Click any page to navigate.
247 items
Small size
32px items — use inside compact UI like table toolbars or sidebars.
247 items
First page (prev disabled)
When on the first page, the previous arrow is disabled.
247 items
Last page (next disabled)
When on the last page, the next arrow is disabled.
247 items
Ellipsis pattern
When the current page is in the middle, ellipsis indicators replace the hidden page ranges on both sides.
247 items
In context — table footer
Pagination lives in the footer of a data table. The item count on the left gives users a sense of total data volume.
InvoiceCustomerAmountStatus
INV-001Acme Corp$1,240.00Paid
INV-002Globex Inc$890.50Pending
INV-003Initech LLC$3,120.00Overdue
247 items
Anatomy
247 items
① Container (full-width flex)② Item count label③ Previous arrow④ Page number items⑤ Ellipsis indicators⑥ Next arrow
① Container
Full-width flex row, items-center justify-between
② Item count
Contextual label showing total records
③ Prev arrow
ChevronLeft — disabled on first page
④ Page items
36px (md) or 32px (sm) square rounded-lg buttons
⑤ Ellipsis
Non-interactive … indicator replacing hidden pages
⑥ Next arrow
ChevronRight — disabled on last page
States
Small (32px)
Default
Hover
Active
Disabled
Ellipsis
Medium (36px)
Default
Hover
Active
Disabled
Ellipsis
Design tokens
| Token | Value | Description |
|---|---|---|
background/brand/primary | #318272 | Active page fill |
text/inverse | #ffffff | Active page text |
background/surface | #ffffff | Item fill |
border/default | #e4e4e7 | Item border |
text/primary | #18181b | Item text |
text/secondary | #71717a | Item count label |
text/disabled | #a1a1aa | Disabled item |
radius/md | 8px | Item corner radius |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | — | Total number of items. |
page | number | 1 | Current page (controlled). |
perPage | number | 25 | Items per page. |
size | "sm" | "md" | "md" | Item size — 32px (sm) or 36px (md). |
onChange | (page: number) => void | — | Called when a page button is clicked. |
showTotal | boolean | true | Whether to show the item count label on the left. |
Content guidelines
Do
- Default to 25 items per page for dense data tables.
- Always show the total item count so users understand the data volume.
- Always show first and last pages for orientation.
- Reset to page 1 when the user changes the page size.
Don't
- ✕Don't paginate fewer than 10 items — show them all inline.
- ✕Don't change page size without resetting to page 1.
- ✕Don't omit prev/next arrows — keyboard and touch users rely on them.
- ✕Don't use pagination for infinite scroll contexts — use a 'Load more' button instead.
View in FigmaPagination component →