Pagination
Square page buttons; the current page is solid.
Examples
Pagination
Anatomy
nav.pagination | An inline row with small gaps. |
> a, > button | Direct children: page links, plus previous and next. Use <button> where a control can be disabled. |
> span | Optional, unstyled: an ellipsis between ranges. |
API
| Attribute | Values | Description |
|---|---|---|
aria-current | page | On the current page: solid fill in the tone colour. |
disabled | boolean | On a <button>: dimmed and ignores the pointer. |
data-tone | accentsuccesswarningdangerinfo | Colours the current page's fill. Default accent. |
Accessibility
- Label the
<nav>(aria-label="Pages") so it is distinct from the main navigation. - Previous and next are icon-only: they need an
aria-label. - Mark the current page with
aria-current="page"; the fill alone is not announced.