# Pagination

Status: stable

Move through a long list a page at a time.

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.

## Example

```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>
```

## 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 */

## Variants

### Pagination

Disable Previous on the first page and Next on the last, rather than hiding them, so the layout does not jump.

```html
<nav class="at-pagination" aria-label="Pagination"><button type="button" class="at-button">Previous</button><span>Page 2 of 4</span><button type="button" class="at-button">Next</button></nav>
```

| State | Specification |

|---|---|

| First page | Previous disabled |

| Middle page | both enabled |

| Last page | Next disabled |

## 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: Words on the buttons, and the current page in plain text.

```html
<nav class="at-pagination" aria-label="Do"><button type="button" class="at-button" disabled>Previous</button><span>Page 1 of 4</span><button type="button" class="at-button">Next</button></nav>
```

Don't: Arrow-only buttons and no page total.

```html
<nav class="at-pagination" aria-label="Don't"><button type="button" class="at-button">&lt;</button><span>1</span><button type="button" class="at-button">&gt;</button></nav>
```

## Do

- Show where the user is.

## Don't

- Use page numbers for very long lists.

## Code

```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

`--at-text-subtle`

## Accessibility

- Wrap in a nav with an aria-label.