Pagination
Navigation between pages of a list.
- Navigation
- 2 files
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add paginationnpm packages installed: radix-ui.
import { Pagination } from "@/components/ui/pagination";Default
Compact
As Buttons
Smooth Pagination
<Pagination>
Plus every attribute of <nav>.
<PaginationContent>
| Prop | Type | Default |
|---|---|---|
indicator
| "none" | "slide" | "none" |
Plus every attribute of <ul>.
<PaginationItem>
Plus every attribute of <li>.
<PaginationLink>
| Prop | Type | Default |
|---|---|---|
isActiveMarks the page the user is on. Sets aria-current="page". | boolean | — |
size | "sm" | "md" | "icon" | "icon-sm" | "icon" |
asChild | boolean | — |
Plus every attribute of <a>.
<PaginationPrevious>
| Prop | Type | Default |
|---|---|---|
isActiveMarks the page the user is on. Sets aria-current="page". | boolean | — |
size | "sm" | "md" | "icon" | "icon-sm" | — |
asChild | boolean | — |
Plus every attribute of <a>.
<PaginationNext>
| Prop | Type | Default |
|---|---|---|
isActiveMarks the page the user is on. Sets aria-current="page". | boolean | — |
size | "sm" | "md" | "icon" | "icon-sm" | — |
asChild | boolean | — |
Plus every attribute of <a>.
<PaginationEllipsis>
Plus every attribute of <span>.
A named nav landmark. The current page carries aria-current="page" — styling it differently conveys nothing on its own. Links by default, since a page of results is a place worth sharing; use asChild for your router's link, or render buttons when paging only changes client state. The optional sliding pill (indicator="slide") is an aria-hidden list item, so the list's item count stays the number of pages, and it stops sliding under reduced motion.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes