# Pagination

Source: https://iriscss.com/documentation/components/pagination/

Page links in a `nav.pagination` list.

Mark the current page with `aria-current="page"` and unavailable links with `aria-disabled="true"`. A `span` fills a gap.

```html
<nav class="pagination" aria-label="Pagination">
  <ul>
    <li><a href="#" aria-disabled="true">Previous</a></li>
    <li><a href="#" aria-current="page">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><span>&hellip;</span></li>
    <li><a href="#">12</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
```

## Colors

A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) on the nav colors the current page.

```html
<nav class="pagination contrast" aria-label="Contrast pagination">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>
<nav class="pagination danger" aria-label="Danger pagination">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#" aria-current="page">3</a></li>
  </ul>
</nav>
```