Pagination
A row of page chips for moving through a long list or paginated view.
Basic
Wrap a list of .pagination__button in .pagination. Mark the current page with data-state="active" and aria-current="page": it paints the highlight, while hover paints the lighter accent.
With icons
Drop an <svg> or <i> inside the chip. Icons sit at 1em so they scale with the chip's font size and stay on the label baseline.
Disabled and ellipsis
Set aria-disabled="true" on a chip (or a bare <span>) to gray it out and drop pointer events — use it on the edge chip at the start/end of the range. Drop .pagination__ellipsis in as a truncation marker between page ranges; it takes the same footprint with no hover or focus.
Sizes
Add .pagination--sm or .pagination--lg for compact or large chips. Heights match the button scale.
Alignment
Add .pagination--center or .pagination--end to flip the row's justify-content. Default is start.
Customization
These variables retune .pagination. Override on the element, a parent scope, or :root.
| Variable | Use |
|---|---|
--pagination-gap | Space between chips |
--pagination-font-size | Chip text size; size modifiers reassign this |
--pagination-button-height | Chip height and min-width (square single glyph); size modifiers reassign this |
--pagination-button-padding-inline | Horizontal padding on multi-char chips |
--pagination-button-padding-block | Vertical padding; defaults to 0 since the chip height owns the rhythm |
--pagination-button-radius | Chip corner radius |
--pagination-button-bg / -color | Rest fill / text |
--pagination-button-bg-hover / -color-hover | Hover fill / text (accent tier) |
--pagination-button-bg-active / -color-active | Current-page fill / text (highlight tier) |
--pagination-button-color-disabled | Disabled and ellipsis text color |