Components / navigation
Pagination
Moves between pages of a long list or table.
import { Pagination } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Pagination } from '@basiiik/ui';
<Pagination page={page} pageCount={12} onPageChange={setPage} />- Example values were filled in for the required props page, pageCount, onPageChange: replace them with your own.
- Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
- Controlled:
page,pageCount,onPageChange.fulllists numbers with ellipses (constant item count);compactshows Page x of y. - Compose with: pagination-item.
- Storybook: Navigation/Pagination.
Props
| Prop | Type | Notes |
|---|---|---|
variant | "full" | "compact" | Default "full" |
page required | number | |
pageCount required | number | |
onPageChange required | (page: number) => void |
Other props
| Prop | Type | What it does |
|---|---|---|
siblingCount | number | Pages shown either side of the current page in full. Default 1. |
aria-label | string | Defines a string value that labels the current element. |
States. Controlled: page, pageCount, onPageChange. full lists numbers with ellipses (constant item count); compact shows Page x of y.
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- Split long lists or tables into pages
Do not use it when
- Infinite feeds
Rules for agents
- Control it with page (1-based), pageCount and onPageChange
- Use variant="full" on wide layouts and variant="compact" on small screens
- After a page change, move focus or scroll to the top of the results and update the URL if pages are linkable
- Place it directly below the list or table it pages, and hide it when there is only one page
Avoid
- Pagination for a feed people scroll through continuously
- Pagination with a single page
- Changing the page without moving the user back to the start of the new results
- Separate Pagination controls that page different lists in the same view without labels (set aria-label)
Writing the content
- Show a result summary near the list when it helps, such as "Showing 21–40 of 312"
Keyboard
- Tab through items
- Enter activates
Accessibility
- Announce page changes in a live region
- Items are buttons; for URL-driven paging update the URL in onPageChange
Colour tokens it reads
color.bg.brand.defaultcolor.icon.primarycolor.text.on-brandcolor.text.primarycolor.text.secondaryRelated
navigation 2 Figma variants Try it in the live demo