Stable
Pagination moves through a long list a page at a time. Atrium keeps it simple: Previous, the current page, and Next. Put it under the table or list it controls.
The wrapper only handles layout. Previous and Next are ordinary secondary buttons, so they get the button hover, focus and disabled styles.
Pagination is the one place Atrium disables buttons: Previous on the first page and Next on the last, where there is genuinely nowhere to go. Everywhere else, keep buttons pressable.
Specifications
Anatomy
1) Previous and Next
.at-button (secondary)
disabled on the first and last page
2) Page status
font-size: var(--at-text-sm) /* 14px */
color: var(--at-text-subtle)
Anatomy
1) Previous and Next
.at-button (secondary)
disabled on the first and last page
2) Page status
font-size: var(--at-text-sm) /* 14px */
color: var(--at-text-subtle)
Size and spacing
Layout
display: flex
justify-content: space-between
align-items: center
Spacing
gap: var(--at-space-4) /* 12px */
Pagination
Disable Previous on the first page and Next on the last, rather than hiding them, so the layout does not jump.
Example
States
First page
Previous disabled
Middle page
both enabled
Last page
Next disabled
Example
States
First page
Previous disabled
Middle page
both enabled
Last page
Next disabled
Usage
When to use
- Lists longer than about 25 rows.
When not to use
- Short lists: show everything.
- Quick views with only a few rows: link to the full app page instead.
Content
- Status as "Page 2 of 4".
- Buttons say "Previous" and "Next", not arrows alone.
Do and don't
Do
- Show where the user is.
Don't
- Use page numbers for very long lists.
Implementation
HTML
<nav class="at-pagination" aria-label="Pagination">
<button type="button" class="at-button" disabled>Previous</button>
<span>Page 1 of 4</span>
<button type="button" class="at-button">Next</button>
</nav>Classes
| Class | What it does |
|---|---|
at-pagination | Previous / position / Next |
Tokens used
--at-text-subtle
Accessibility
- Wrap in a nav with an aria-label.