PimentCSS: Pagination

Styles live in scss/components/_pagination.scss. Pagination patterns for lists and tables: page links, jumpers, and arrow navigation.

Anatomy

Part	Class	Role
Bar	`.pagination`	`<nav>` with `aria-label`
Group	`.pagination__group`	Flex row: arrows, jumper, or list
List	`.pagination__list`	`<ul>` of page buttons (jumper variant)
Item	`.pagination__item`	44×44px button; `--prev` / `--next` flip the arrow icon
Icon	`.pagination__item-icon`	24px arrow (`aria-hidden` when labeled)
Jumper	`.pagination__jumper`	Page field + `.pagination__jumper-suffix`
Results	`.pagination__results`	Optional select block (12px gap from group)
Select wrap	`.pagination__results-select-wrap`	Chevron overlay (`currentColor`, theme-aware)

Prerequisites

PimentCSS installed, Installation.
Icons, arrows via ph() (Phosphor in this doc).
Screen reader text, use .sr-only for visually hidden labels on inputs.

Pagination item states

Matrix previews use static buttons. Doc-only .pagination__item--hover and .pagination__item--focus show states; production uses :hover and :focus-visible. Selected uses .pagination__item--selected and aria-current="page".

Default

Focus

Hover

Disabled

Overflow

Numeric

Selected

Default (page jump)

Previous and next arrows flank a centered page field. Label the field with .sr-only or aria-label.

Jumper (numbered list)

Page numbers live in .pagination__list inside <li> elements. Wrap prev/next in list items for even spacing.

<nav class="pagination" aria-label="Results">
  <div class="pagination__group">
    <button type="button" class="pagination__item pagination__item--prev" aria-label="Previous page">…</button>
    <ul class="pagination__list">
      <li><button type="button" class="pagination__item pagination__item--selected" aria-current="page">1</button></li>
      <li><button type="button" class="pagination__item">2</button></li>
    </ul>
    <button type="button" class="pagination__item pagination__item--next" aria-label="Next page">…</button>
  </div>
</nav>

Interactive examples

Add data-pagination-live on .pagination and call wireAllPaginations() after load. Numbered lists update aria-current; the default jumper wires prev/next to the field.

// See docs-site/src/lib/pagination-behavior.ts (page selection, jumper prev/next).

With results per page

Optional block to the right of the group (12px gap). Pair with a labeled select.

of 20 pages

Results per page

Class reference

Class	Description
`.pagination`	Nav container (flex, wrap, gap 8px)
`.pagination__group`	Primary control cluster
`.pagination__list`	Horizontal list of page buttons
`.pagination__item`	44×44px control (action colors)
`.pagination__item--prev`	Flips arrow icon (scaleX -1)
`.pagination__item--next`	Arrow points right
`.pagination__item--selected`	Current page (filled action surface)
`.pagination__item--hover`	Doc-only hover preview
`.pagination__item--focus`	Doc-only focus ring preview
`.pagination__item-icon`	24px icon slot
`.pagination__jumper`	Field + suffix row
`.pagination__jumper-field`	Centered numeric input
`.pagination__jumper-suffix`	Caption (for example, of 20 pages)
`.pagination__results`	Results-per-page row
`.pagination__results-select`	Styled select (`text-filled` value, options on `surface-primary`)
`.pagination__results-select-wrap`	Wrap for mask chevron (do not remove)

Customize (Sass)

@use "pimentcss-design-system" with (
  $pagination-item-size: 2.75rem,
  $pagination-gap: 0.5rem,
  $pagination-jumper-width: 3rem,
  $pagination-results-select-width: 5rem
);

Rebuild CSS
Run after editing _pagination.scss.
```
npm run build:css
```

Accessibility (RGAA / WCAG)

Next steps

Tabs

Tab lists for switching views.

In-page anchors

Vertical section navigation.

Tables

Data tables often pair with pagination.

Navigation

Header bars and nav links.