Tablesibling
Commonly paired for table paginationPagination
Page navigation for paginated data. Supports controlled/uncontrolled, page counts, and edge/sibling customization.
Setup
import { Pagination } from '@fragments-sdk/ui';Examples
Default
Basic pagination with 10 pages
Loading preview...
With Edge Pages
Shows 2 pages at each edge
Loading preview...
Compact
No siblings, minimal display
Loading preview...
Controlled
Controlled pagination at page 3
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | — |
totalPagesRequired | number | Not set | Total number of pages |
page | number | Not set | Controlled current page (1-indexed) |
defaultPage | number | 1 | Default page (uncontrolled) |
onPageChange | function | Not set | Called when page changes |
edgeCount | number | 1 | Number of pages shown at edges |
siblingCount | number | 1 | Number of pages shown around current |
Usage Guidelines
When to use
- Navigating through paginated data sets
- Table or list pagination controls
- Search results with multiple pages
- Any content split across multiple pages
When not to use
- Small lists that fit on one page
- Infinite scroll patterns (use IntersectionObserver)
- Tab-based navigation (use Tabs)
- Step-by-step wizards (use Stepper)
Best practices
- Place below the content being paginated
- Use edgeCount to always show first/last pages
- Use siblingCount to control how many pages surround the current page
- Pair with Table component for data table pagination
- Pagination forwards standard nav props (id, aria-*, data-*, event handlers) to the root <nav>
- Previous/Next/Item buttons compose your onClick handlers; call event.preventDefault() to stop the page change
Accessibility
- Uses nav element with aria-label="Pagination"
- aria-current="page" marks the active page
- Previous/Next buttons have descriptive aria-labels
- Disabled buttons at boundaries prevent invalid navigation