Components

Pagination

A flat strip of square, 1px-bordered page buttons with prev/next controls and an ellipsis where the run is collapsed. The active page fills with ink; the nav buttons dim when there is nowhere to go.

Interactive

Click a page or the prev/next buttons. The active page carries is-active, and the nav buttons take disabled at the ends of the range.

Live

<nav class="ds-pagination" aria-label="Pagination">
  <button class="ds-pagination__nav" aria-label="Previous page" disabled>Prev</button>
  <button class="ds-pagination__item is-active" aria-current="page">1</button>
  <button class="ds-pagination__item">2</button>
  <button class="ds-pagination__item">3</button>
  <button class="ds-pagination__item">4</button>
  <button class="ds-pagination__item">5</button>
  <button class="ds-pagination__nav" aria-label="Next page">Next</button>
</nav>

Collapsed run

For long ranges, keep the first and last page and drop a ds-pagination__ellipsis where the middle is hidden.

With ellipsis

<nav class="ds-pagination" aria-label="Pagination">
  <button class="ds-pagination__nav" aria-label="Previous page">Prev</button>
  <button class="ds-pagination__item">1</button>
  <span class="ds-pagination__ellipsis" aria-hidden="true">…</span>
  <button class="ds-pagination__item">5</button>
  <button class="ds-pagination__item is-active" aria-current="page">6</button>
  <button class="ds-pagination__item">7</button>
  <span class="ds-pagination__ellipsis" aria-hidden="true">…</span>
  <button class="ds-pagination__item">24</button>
  <button class="ds-pagination__nav" aria-label="Next page">Next</button>
</nav>

React

Controlled: hold page in state and update it from onChange. The component computes the window and ellipses from pageCount and siblingCount.

import { useState } from "react";
import { Pagination } from "@diametral/design-system/react";

const [page, setPage] = useState(6);

<Pagination
  page={page}
  pageCount={24}
  siblingCount={1}
  onChange={setPage}
/>