Pagination
Page navigation elements for showing multiple page navigation on lists, search results, etc.
Examples
Basic usage
<nav class="pagination" aria-label="Pagination">
<a class="pagination-prev" href="#" aria-label="Previous page">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="15 18 9 12 15 6" />
</svg>
<span class="pagination-label">Previous</span>
</a>
<ol class="pagination-list">
<li><a class="pagination-item" href="#">1</a></li>
<li><a class="pagination-item" href="#">2</a></li>
<li><a class="pagination-item" href="#" aria-current="page">3</a></li>
<li><a class="pagination-item" href="#">4</a></li>
<li><a class="pagination-item" href="#">5</a></li>
</ol>
<a class="pagination-next" href="#" aria-label="Next page">
<span class="pagination-label">Next</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="9 18 15 12 9 6" />
</svg>
</a>
</nav>
With ellipsis
<nav class="pagination" aria-label="Pagination">
<a class="pagination-prev" href="#" aria-label="Previous page">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="15 18 9 12 15 6" />
</svg>
<span class="pagination-label">Previous</span>
</a>
<ol class="pagination-list">
<li><a class="pagination-item" href="#">1</a></li>
<li><span class="pagination-item is-ellipsis" aria-hidden="true">…</span></li>
<li><a class="pagination-item" href="#">4</a></li>
<li><a class="pagination-item" href="#" aria-current="page">5</a></li>
<li><a class="pagination-item" href="#">6</a></li>
<li><span class="pagination-item is-ellipsis" aria-hidden="true">…</span></li>
<li><a class="pagination-item" href="#">20</a></li>
</ol>
<a class="pagination-next" href="#" aria-label="Next page">
<span class="pagination-label">Next</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="9 18 15 12 9 6" />
</svg>
</a>
</nav>
Disabled controls
<nav class="pagination" aria-label="Pagination">
<span class="pagination-prev is-disabled" aria-disabled="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="15 18 9 12 15 6" />
</svg>
<span class="pagination-label">Previous</span>
</span>
<ol class="pagination-list">
<li><a class="pagination-item" href="#" aria-current="page">1</a></li>
<li><a class="pagination-item" href="#">2</a></li>
<li><a class="pagination-item" href="#">3</a></li>
</ol>
<a class="pagination-next" href="#" aria-label="Next page">
<span class="pagination-label">Next</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="9 18 15 12 9 6" />
</svg>
</a>
</nav>
Small variant
<nav class="pagination is-compact" aria-label="Pagination">
<a class="pagination-prev" href="#" aria-label="Previous page">
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="15 18 9 12 15 6" />
</svg>
<span class="pagination-label">Previous</span>
</a>
<ol class="pagination-list">
<li><a class="pagination-item" href="#">1</a></li>
<li><a class="pagination-item" href="#" aria-current="page">2</a></li>
<li><a class="pagination-item" href="#">3</a></li>
<li><a class="pagination-item" href="#">4</a></li>
</ol>
<a class="pagination-next" href="#" aria-label="Next page">
<span class="pagination-label">Next</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="9 18 15 12 9 6" />
</svg>
</a>
</nav>
Condensed (narrow widths)
<nav class="pagination is-condensed" aria-label="Pagination">
<a class="pagination-prev" href="#" aria-label="Previous page">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="15 18 9 12 15 6" />
</svg>
<span class="pagination-label">Previous</span>
</a>
<ol class="pagination-list">
<li><a class="pagination-item" href="#">1</a></li>
<li><span class="pagination-item is-ellipsis" aria-hidden="true">…</span></li>
<li><a class="pagination-item" href="#">4</a></li>
<li><a class="pagination-item" href="#" aria-current="page">5</a></li>
<li><a class="pagination-item" href="#">6</a></li>
<li><span class="pagination-item is-ellipsis" aria-hidden="true">…</span></li>
<li><a class="pagination-item" href="#">20</a></li>
</ol>
<a class="pagination-next" href="#" aria-label="Next page">
<span class="pagination-label">Next</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<polyline points="9 18 15 12 9 6" />
</svg>
</a>
</nav>
Source comments
Pagination -- page navigation for lists and search results
(extra).
Markup:
<nav class="pagination" aria-label="Pagination">
<a class="pagination-prev" href="?page=4" aria-label="Previous">
<svg aria-hidden="true">...</svg>
<span class="pagination-label">Previous</span>
</a>
<ol class="pagination-list">
<li><a class="pagination-item" href="?page=1">1</a></li>
<li><span class="pagination-item is-ellipsis">…</span></li>
<li><a class="pagination-item" href="?page=4">4</a></li>
<li><a class="pagination-item" href="?page=5"
aria-current="page">5</a></li>
<li><a class="pagination-item" href="?page=6">6</a></li>
<li><span class="pagination-item is-ellipsis">…</span></li>
<li><a class="pagination-item" href="?page=20">20</a></li>
</ol>
<a class="pagination-next" href="?page=6" aria-label="Next">
<span class="pagination-label">Next</span>
<svg aria-hidden="true">...</svg>
</a>
</nav>
Archetype: Semantic wrapper (P3) over an ordered list. The
consumer's app decides which page numbers to render based on
count + current; brio paints the chosen sequence. CSS does NOT
try to auto-collapse the page-number list -- that's the
consumer's structural decision, not a width-based visual one.
The .is-condensed variant only collapses the text label inside
prev/next, since "Previous" and "Next" are wide chrome that
doesn't carry information when an icon and aria-label are
present.
Container-query threshold: hardcoded at 28rem in the @container
rule. Container query lengths can't be var()-driven (the value
resolves at rule parse, not at element match), so a token-driven
threshold isn't possible. Consumers needing a different threshold
write their own @container rule in their CSS.
Active state follows the P4 corollary: chromatic foreground
(primary text + semibold) over a fill set by the library-wide
--color-state-fill semantic token. Default is neutral so the
pagination reads minimal; override --color-state-fill at :root for
a chromatic mood. The earlier full-primary background was the
thing being avoided -- a CTA-shaped fill -- not the chromatic
direction itself.
Reference
Source: src/css/extras/pagination.css
.pagination
| Class | Kind | Description |
|---|
.is-ellipsis | variant | Non-interactive ellipsis placeholder between page ranges |
.[disabled], | modifier | Disabled state for directional links at list boundaries |
.is-compact | variant | Denser pagination with smaller items and tighter gap |
.is-condensed | variant | Collapses prev/next text labels at narrow container widths |
| Slot | Description |
|---|
.pagination-list | Ordered list of page number items |
.pagination-item | Individual page number link or placeholder |
.pagination-prev, .pagination-next | Directional navigation link for previous or next page |
| Token | Default | Description |
|---|
--pagination-gap | var(--ui-gutter-tight) | Gap between page number items |
--pagination-item-size | 2.25rem | Minimum inline and block size for each page item |
--pagination-radius | var(--radius-sm) | Corner radius for page items and directional links |
--pagination-font-size | var(--ui-font-size-sm) | Font size for page numbers and labels |
--pagination-item-bg-hover | var(--color-fill) | Hover background for inactive page items |
--pagination-item-bg-active | var(--color-state-fill) | Background color for the current page indicator |
--pagination-item-color-active | var(--color-primary) | Text color for the current page indicator |