Pagination

Default

Combine .pagination with .pagination-item.

<nav class="pagination" aria-label="Pagination">
	<a class="pagination-item" href="#">Previous</a>
	<a class="pagination-item" href="#">1</a>
	<a class="pagination-item is-active" href="#" aria-current="page">2</a>
	<a class="pagination-item" href="#">3</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

Disabled item

Use .disabled for unavailable items.

<nav class="pagination" aria-label="Pagination">
	<span class="pagination-item disabled">Previous</span>
	<a class="pagination-item is-active" href="#" aria-current="page">1</a>
	<a class="pagination-item" href="#">2</a>
	<a class="pagination-item" href="#">3</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

With ellipsis

Use .pagination-ellipsis for skipped ranges.

<nav class="pagination" aria-label="Pagination">
	<a class="pagination-item" href="#">Previous</a>
	<a class="pagination-item" href="#">1</a>
	<span class="pagination-item pagination-ellipsis">…</span>
	<a class="pagination-item" href="#">8</a>
	<a class="pagination-item is-active" href="#" aria-current="page">9</a>
	<a class="pagination-item" href="#">10</a>
	<span class="pagination-item pagination-ellipsis">…</span>
	<a class="pagination-item" href="#">20</a>
	<a class="pagination-item" href="#">Next</a>
</nav>

CSS Variables

Override these variables on the component or an ancestor.

--pagination-gap: var(--spacer-1);
--pagination-item-min-width: 2.25rem;
--pagination-item-padding-y: var(--spacer-1);
--pagination-item-padding-x: var(--spacer-2);
--pagination-item-border-radius: 9999px;
--pagination-item-color: var(--text-color);
--pagination-item-bg-color: transparent;
--pagination-item-hover-color: var(--action-color);
--pagination-item-hover-bg-color: var(--bg-highlight);
--pagination-item-active-color: var(--on-primary);
--pagination-item-active-bg-color: var(--primary);
--pagination-item-disabled-color: var(--disabled-text-color);
--pagination-item-focus-outline-width: var(--focus-outline-width);
--pagination-item-focus-outline-style: var(--focus-outline-style);
--pagination-item-focus-outline-color: var(--focus-outline-color);
--pagination-item-focus-outline-offset: var(--focus-offset);
--pagination-transition-duration: var(--transition-duration);
--pagination-transition-easing: var(--transition-easing);