Components
Pagination
Page navigation: previous and next, page links and ellipses. `getPageRange` computes which pages to show.
Server componentNo state or handlers. Safe to render in a Server Component.
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, getPageRange } from "@glob-ui/pagination"Preview
Examples
Controlled with buttons
Buttons instead of links, with state. getPageRange decides which pages and ellipses to show.
Page 1 of 12
API
Props are generated from the TypeScript types in the package source.
PaginationLink
Prop
Type
PaginationPrevious
Prop
Type
getPageRange
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Current page | aria-current="page" on the active link. |
| Previous, Next | Named "Go to previous page" and "Go to next page". When disabled they have aria-disabled and no href. |
| Ellipsis | The dots are decorative; the text "More pages" is read instead. |
ARIA. The landmark is a nav named "Pagination". Links are native anchors; use asChild with your router's link so the router renders the anchor.