Skip to main content
Texas Design System

Pagination

Limits content to pages of results. Default 10 items per page.
WCAG 2.2 AA Reviewed April 2026 Accessibility notes

Used on Search, Agency Directory, and News & Events page templates to limit the number of items per page. Set to 10 by default, but can be configured.

Required elements: First, Previous, page numbers, Next, Last. Optional: Title label above pagination.

Desktop — Default

View HTML 
<div class="txds-pagination">
  <ul class="txds-pagination__list">
    <li class="txds-pagination__item txds-pagination__item--first">
      <a href="#">&#171; First</a>
    </li>
    <li class="txds-pagination__item txds-pagination__item--prev">
      <a href="#">&#8249; Previous</a>
    </li>
    <li class="txds-pagination__item txds-pagination__item--current">
      <span aria-current="page">1</span>
    </li>
    <li class="txds-pagination__item"><a href="#">2</a></li>
    <li class="txds-pagination__item"><a href="#">3</a></li>
    <li class="txds-pagination__item"><a href="#">4</a></li>
    <li class="txds-pagination__item txds-pagination__item--ellipsis">
      <span>…</span>
    </li>
    <li class="txds-pagination__item"><a href="#">10</a></li>
    <li class="txds-pagination__item txds-pagination__item--next">
      <a href="#">Next &#8250;</a>
    </li>
    <li class="txds-pagination__item txds-pagination__item--last">
      <a href="#">Last &#187;</a>
    </li>
  </ul>
</div>

Desktop — Hover State (Page 2, Next Hovered)

View HTML 
<div class="txds-pagination">
  <ul class="txds-pagination__list">
    <li class="txds-pagination__item txds-pagination__item--first">
      <a href="#">&#171; First</a>
    </li>
    <li class="txds-pagination__item txds-pagination__item--prev">
      <a href="#">&#8249; Previous</a>
    </li>
    <li class="txds-pagination__item"><a href="#">1</a></li>
    <li class="txds-pagination__item txds-pagination__item--current">
      <span aria-current="page">2</span>
    </li>
    <li class="txds-pagination__item"><a href="#">3</a></li>
    <li class="txds-pagination__item"><a href="#">4</a></li>
    <li class="txds-pagination__item txds-pagination__item--ellipsis">
      <span>…</span>
    </li>
    <li class="txds-pagination__item"><a href="#">10</a></li>
    <li class="txds-pagination__item txds-pagination__item--next">
      <a href="#" style="color: var(--txds-color-primary-60);">Next &#8250;</a>
    </li>
    <li class="txds-pagination__item txds-pagination__item--last">
      <a href="#">Last &#187;</a>
    </li>
  </ul>
</div>

First Page (Previous/First Disabled)

View HTML 
<div class="txds-pagination">
  <ul class="txds-pagination__list">
    <li class="txds-pagination__item txds-pagination__item--first txds-pagination__item--disabled">
      <span>&#171; First</span>
    </li>
    <li class="txds-pagination__item txds-pagination__item--prev txds-pagination__item--disabled">
      <span>&#8249; Previous</span>
    </li>
    <li class="txds-pagination__item txds-pagination__item--current">
      <span aria-current="page">1</span>
    </li>
    <li class="txds-pagination__item"><a href="#">2</a></li>
    <li class="txds-pagination__item"><a href="#">3</a></li>
    <li class="txds-pagination__item txds-pagination__item--ellipsis">
      <span>…</span>
    </li>
    <li class="txds-pagination__item"><a href="#">10</a></li>
    <li class="txds-pagination__item txds-pagination__item--next">
      <a href="#">Next &#8250;</a>
    </li>
    <li class="txds-pagination__item txds-pagination__item--last">
      <a href="#">Last &#187;</a>
    </li>
  </ul>
</div>

Mobile

View HTML 
<div class="txds-pagination" style="max-width: 320px;">
  <ul class="txds-pagination__list" style="justify-content: center;">
    <li class="txds-pagination__item txds-pagination__item--prev">
      <a href="#">&#8249; Prev</a>
    </li>
    <li class="txds-pagination__item txds-pagination__item--current">
      <span aria-current="page">1</span>
    </li>
    <li class="txds-pagination__item txds-pagination__item--ellipsis">
      <span>…</span>
    </li>
    <li class="txds-pagination__item txds-pagination__item--next">
      <a href="#">Next &#8250;</a>
    </li>
  </ul>
</div>

CSS Classes

Class Description
txds-pagination Base pagination container.
txds-pagination__list Ordered list of pagination items.
txds-pagination__item Individual page number item.
txds-pagination__item--current Currently active page (dark filled).
txds-pagination__item--ellipsis Ellipsis separator between page groups.
txds-pagination__item--first First page link.
txds-pagination__item--prev Previous page link.
txds-pagination__item--next Next page link.
txds-pagination__item--last Last page link.
txds-pagination__item--disabled Disabled navigation item (e.g. Previous on page 1).