Base

Class	Description
.ui-pagination	Base class

Size

Class	Value
.ui-pagination--sm	sm
.ui-pagination--lg	lg

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-pagination-gap	calc(var(--ui-unit) * 0.5)	Gap between children
--ui-pagination-item-size	calc(var(--ui-unit) * 4)	Item overall size
--ui-pagination-item-radius	var(--ui-radius-sm)	Item corner radius
--ui-pagination-item-bg	transparent	Item background color
--ui-pagination-item-bg-hover	var(--ui-color-bg-subtle)	Item bg hover
--ui-pagination-item-bg-active	var(--ui-color-primary)	Item bg active
--ui-pagination-item-color	var(--ui-color-text)	Item text color
--ui-pagination-item-color-active	var(--ui-color-text-inverse)	Item color active

<nav class="ui-pagination">
  <a class="ui-pagination__link ui-pagination__prev" href="#">Prev</a>
  <ul class="ui-pagination__list">
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">1</a>
    </li>
    <li class="ui-pagination__item">
      <span class="ui-pagination__ellipsis">...</span>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">4</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">5</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">6</a>
    </li>
    <li class="ui-pagination__item">
      <span class="ui-pagination__ellipsis">...</span>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">20</a>
    </li>
  </ul>
  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
</nav>

<nav class="ui-pagination">
  <a class="ui-pagination__link ui-pagination__prev ui-pagination__link--disabled" aria-disabled="true">Prev</a>
  <ul class="ui-pagination__list">
    <li class="ui-pagination__item">
      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">1</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">2</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">3</a>
    </li>
  </ul>
  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
</nav>

<nav class="ui-pagination ui-pagination--sm">
  <ul class="ui-pagination__list">
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">1</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">2</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">3</a>
    </li>
  </ul>
</nav>
<nav class="ui-pagination">
  <ul class="ui-pagination__list">
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">1</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">2</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">3</a>
    </li>
  </ul>
</nav>
<nav class="ui-pagination ui-pagination--lg">
  <ul class="ui-pagination__list">
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">1</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">2</a>
    </li>
    <li class="ui-pagination__item">
      <a class="ui-pagination__link" href="#">3</a>
    </li>
  </ul>
</nav>