Pagination
Page controls for moving through a bounded collection of results.
Examples
Pages
Overview
Compose previous, numbered, ellipsis, and next controls. Set active on the current page and disable unavailable directions.
tsx
import { Pagination, PaginationContent, PaginationLink } from "@standard-ui/react" <Pagination> <PaginationContent> <PaginationLink active>1</PaginationLink> </PaginationContent> </Pagination>
API
| Part | Role |
|---|---|
| Pagination | Navigation landmark. |
| PaginationLink | Page button with current state. |
| PaginationEllipsis | Omitted range indicator. |
Guidelines
Do
- Preserve the current page during navigation
Don't
- Don't show every page in a large collection