Components
Pagination
Page navigation control with sm/md/lg sizes, page links, and prev/next buttons.
Installation
npx asteria-ui add paginationUsage
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious />
</PaginationItem>
<PaginationItem>
<PaginationLink isActive>1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink>2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext />
</PaginationItem>
</PaginationContent>
</Pagination>Examples
Sizes
Interactive
API reference
PaginationContent
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Item diameter — 28 / 36 / 44px. |
PaginationLink
| Prop | Type | Default | Description |
|---|---|---|---|
| isActive | boolean | — | Marks this as the current page — sets aria-current="page". |
| size | "sm" | "md" | "lg" | "md" | Item diameter — 28 / 36 / 44px. |
Pagination, PaginationItem, PaginationPrevious, PaginationNext, and PaginationEllipsis forward the rest of their props to a native <nav>/<li>/<button>/<span> respectively.
Related components
- Table — often paired with pagination
- Spinner — for loading between pages
- Breadcrumbs — for hierarchical navigation
Accessibility
Accessibility
Root. Renders as a
<nav aria-label="Pagination">.Current page.
PaginationLink'sisActivesetsaria-current="page".Keyboard. Every control is a native
<button>— Tab moves between them, Enter/Space activates.Ellipsis. Purely decorative icon, with a visually hidden "More pages" label for screen readers.
Disabled.
PaginationPrevious/PaginationNextuse the nativedisabledattribute at the start/end of the range.