When To Use
- Use Pagination when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
- Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
- Review the examples below to understand the tradeoffs between density, emphasis, and behavior.
When Not To Use
- Do not use Pagination just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
- Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.
Accessibility Notes
- Mark the current item clearly with visual state and the appropriate ARIA current/selected semantics.
- Ensure arrow-key or tab-key movement stays predictable when the pattern behaves like a composite widget.
- Do not rely on icon-only navigation unless every control has a clear accessible name.
Key Props / API
Key exports
Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext
Example Code
import {
Pagination, PaginationContent, PaginationItem,
PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis,
} from "@hilum/ui"
<Pagination>
<PaginationContent>
<PaginationItem><PaginationPrevious href="#" /></PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationEllipsis /></PaginationItem>
<PaginationItem><PaginationLink href="#">8</PaginationLink></PaginationItem>
<PaginationItem><PaginationNext href="#" /></PaginationItem>
</PaginationContent>
</Pagination>Pagination
Default
Page navigation with prev / next controls