Pagination
Full for desktop tables, Simple when the count matters more than direct access.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<nav class="px-pagination" aria-label="Pagination" data-px-pagination>
<button type="button" class="px-btn px-btn--secondary-gray px-btn--sm" data-step="-1"><svg class="px-icon" aria-hidden="true">…</svg>Previous</button>
<div class="px-pagination__pages">
<button type="button" class="px-page" aria-current="page">1</button><button type="button" class="px-page">2</button><button type="button" class="px-page">3</button><span class="px-page px-page--ellipsis">…</span><button type="button" class="px-page">8</button><button type="button" class="px-page">9</button><button type="button" class="px-page">10</button>
</div>
<button type="button" class="px-btn px-btn--secondary-gray px-btn--sm" data-step="1">Next<svg class="px-icon" aria-hidden="true">…</svg></button>
</nav>Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Simple
<nav class="px-pagination" aria-label="Pagination" data-px-pagination><button type="button" class="px-btn px-btn--secondary-gray px-btn--sm px-btn--icon" data-step="-1" aria-label="Previous"><svg class="px-icon" aria-hidden="true">…</svg></button><span class="px-pagination__info" data-total="10">Page 1 of 10</span><span style="display:none"><button class="px-page" aria-current="page">1</button><button class="px-page">2</button><button class="px-page">3</button><button class="px-page">4</button><button class="px-page">5</button><button class="px-page">6</button><button class="px-page">7</button><button class="px-page">8</button><button class="px-page">9</button><button class="px-page">10</button></span><button type="button" class="px-btn px-btn--secondary-gray px-btn--sm px-btn--icon" data-step="1" aria-label="Next"><svg class="px-icon" aria-hidden="true">…</svg></button></nav>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-pagination | class | Container (nav). |
px-page · --ellipsis | class | Page button; aria-current="page" when selected. |
data-px-pagination · data-step | attribute | Demo behaviour. |
Figma properties
Pagination6 variants · page “Pagination”Open
Full for desktop tables and lists, Simple when the page count matters more than direct access, Compact for mobile. In RTL, Previous sits on the right and arrows flip. Wrap in <nav aria-label="…
| Property | Type | Values |
|---|---|---|
| Type | Variant | Full Simple Compact |
| Direction | Variant | LTR RTL |
Pagination / Item5 variants · page “Pagination”Open
Page number button. Selected has aria-current="page"; Ellipsis is not interactive.
| Property | Type | Values |
|---|---|---|
| Page | Text | “1” |
| State | Variant | Default Hover Focused Selected Ellipsis |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-pagination-content-default | color-content-neutral-secondary | #475467 |
--px-pagination-size | spacing-36 | 36px |
--px-pagination-radius | radius-12 | 12px |
Accessibility
- Wrap in <nav aria-label="Pagination">.