Pagination v0.5.0+ HelixUI v0.5.0 or later required

First Page

<div class="hxPagination hxBtnGroup">
  <button class="hxBtn" disabled>
    <hx-icon type="angle-start"></hx-icon>
  </button>
  <button class="hxBtn" disabled>
    <hx-icon type="angle-left"></hx-icon>
  </button>
  <button class="hxBtn" aria-current="true">1</button>
  <button class="hxBtn">2</button>
  <button class="hxBtn">3</button>
  <button class="hxBtn">4</button>
  <button class="hxBtn">5</button>
  <button class="hxBtn">
    <hx-icon type="angle-right"></hx-icon>
  </button>
  <button class="hxBtn">
    <hx-icon type="angle-end"></hx-icon>
  </button>
</div>

Middle Page

<div class="hxPagination hxBtnGroup">
  <button class="hxBtn">
    <hx-icon type="angle-start"></hx-icon>
  </button>
  <button class="hxBtn">
    <hx-icon type="angle-left"></hx-icon>
  </button>
  <button class="hxBtn">8</button>
  <button class="hxBtn">9</button>
  <button class="hxBtn" aria-current="true">10</button>
  <button class="hxBtn">11</button>
  <button class="hxBtn">12</button>
  <button class="hxBtn">
    <hx-icon type="angle-right"></hx-icon>
  </button>
  <button class="hxBtn">
    <hx-icon type="angle-end"></hx-icon>
  </button>
</div>

Last Page

<div class="hxPagination hxBtnGroup">
  <button class="hxBtn">
    <hx-icon type="angle-start"></hx-icon>
  </button>
  <button class="hxBtn">
    <hx-icon type="angle-left"></hx-icon>
  </button>
  <button class="hxBtn">16</button>
  <button class="hxBtn">17</button>
  <button class="hxBtn">18</button>
  <button class="hxBtn">19</button>
  <button class="hxBtn" aria-current="true">20</button>
  <button class="hxBtn" disabled>
    <hx-icon type="angle-right"></hx-icon>
  </button>
  <button class="hxBtn" disabled>
    <hx-icon type="angle-end"></hx-icon>
  </button>
</div>

Accessibility

The aria-current attribute needs to be added to the current button in order to apply style as well as denote semantic meaning.

See Also