Phenix Design System

Appearance

Pagination ​

Overview ​

The Pagination component in the Phenix Design System provides a flexible way to create navigation controls for paginated content. It's built using utility classes and can be customized to fit various design requirements.

Basic Usage ​

Create a basic pagination component using unordered lists with the .pagination class and flexbox utilities:

html
<!-- Basic Pagination -->
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn">Previous</a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square">3</a></li>
  <li class="me-10"><a href="#" class="btn">Next</a></li>
</ul>

Pagination Styles ​

Standard Pagination ​

The standard pagination uses text labels for previous and next buttons:

html
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn">Previous Page</a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square">3</a></li>
  <li class="me-10"><a href="#" class="btn square">4</a></li>
  <li class="me-10"><a href="#" class="btn square">5</a></li>
  <li class="me-10"><a href="#" class="btn">Next Page</a></li>
</ul>

Icon Pagination ​

Use icons for previous and next buttons for a more compact design:

html
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square">3</a></li>
  <li class="me-10"><a href="#" class="btn square">4</a></li>
  <li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>

Compact Pagination ​

For a more compact design, use square buttons for all elements:

html
<ul class="reset-list pagination flexbox">
  <li class="me-5"><a href="#" class="btn square small far fa-angle-left"></a></li>
  <li class="me-5"><a href="#" class="btn square small primary">1</a></li>
  <li class="me-5"><a href="#" class="btn square small">2</a></li>
  <li class="me-5"><a href="#" class="btn square small">3</a></li>
  <li class="me-5"><a href="#" class="btn square small far fa-angle-right"></a></li>
</ul>

Alignment Options ​

Align pagination components using flexbox utilities:

Left-Aligned (Default) ​

html
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>

Center-Aligned ​

html
<ul class="reset-list pagination flexbox align-center-x">
  <li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>

Right-Aligned ​

html
<ul class="reset-list pagination flexbox align-end-x">
  <li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>

Customization ​

Button Styles ​

Customize the appearance of pagination buttons using button utility classes:

html
<!-- Outline Buttons -->
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn outline square far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn outline square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn outline square">2</a></li>
  <li class="me-10"><a href="#" class="btn outline square far fa-angle-right"></a></li>
</ul>

<!-- Rounded Buttons -->
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn radius-rounded square far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn radius-rounded square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn radius-rounded square">2</a></li>
  <li class="me-10"><a href="#" class="btn radius-rounded square far fa-angle-right"></a></li>
</ul>

<!-- Custom Colors -->
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn square secondary far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn square success">1</a></li>
  <li class="me-10"><a href="#" class="btn square info">2</a></li>
  <li class="me-10"><a href="#" class="btn square secondary far fa-angle-right"></a></li>
</ul>

Sizes ​

Adjust the size of pagination buttons:

html
<!-- Small Pagination -->
<ul class="reset-list pagination flexbox">
  <li class="me-5"><a href="#" class="btn small square far fa-angle-left"></a></li>
  <li class="me-5"><a href="#" class="btn small square primary">1</a></li>
  <li class="me-5"><a href="#" class="btn small square">2</a></li>
  <li class="me-5"><a href="#" class="btn small square far fa-angle-right"></a></li>
</ul>

<!-- Large Pagination -->
<ul class="reset-list pagination flexbox">
  <li class="me-15"><a href="#" class="btn large square far fa-angle-left"></a></li>
  <li class="me-15"><a href="#" class="btn large square primary">1</a></li>
  <li class="me-15"><a href="#" class="btn large square">2</a></li>
  <li class="me-15"><a href="#" class="btn large square far fa-angle-right"></a></li>
</ul>

Advanced Usage ​

Pagination with Ellipsis ​

For large page counts, use ellipsis to indicate skipped pages:

html
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square">3</a></li>
  <li class="me-10"><span class="btn square disabled">...</span></li>
  <li class="me-10"><a href="#" class="btn square">8</a></li>
  <li class="me-10"><a href="#" class="btn square">9</a></li>
  <li class="me-10"><a href="#" class="btn square">10</a></li>
  <li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>

Disabled States ​

Use the disabled class to indicate unavailable navigation options:

html
<ul class="reset-list pagination flexbox">
  <li class="me-10"><a href="#" class="btn square disabled far fa-angle-left"></a></li>
  <li class="me-10"><a href="#" class="btn square primary">1</a></li>
  <li class="me-10"><a href="#" class="btn square">2</a></li>
  <li class="me-10"><a href="#" class="btn square">3</a></li>
  <li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
</ul>

Pagination with Page Information ​

Add page information alongside pagination controls:

html
<div class="flexbox align-between align-center-y">
  <p class="fs-14">Showing 1-10 of 50 items</p>
  <ul class="reset-list pagination flexbox">
    <li class="me-10"><a href="#" class="btn square far fa-angle-left"></a></li>
    <li class="me-10"><a href="#" class="btn square primary">1</a></li>
    <li class="me-10"><a href="#" class="btn square">2</a></li>
    <li class="me-10"><a href="#" class="btn square">3</a></li>
    <li class="me-10"><a href="#" class="btn square far fa-angle-right"></a></li>
  </ul>
</div>

Integration with DataTable ​

The Pagination component is automatically integrated with the DataTable component:

html
<div class="px-datatable" data-items="10">
  <table class="table">
    <!-- Table content -->
  </table>
</div>

<script>
  Phenix('.px-datatable').datatable();
</script>

The DataTable component will automatically generate pagination controls based on the number of rows and the data-items attribute.

Accessibility ​

For better accessibility, consider adding appropriate ARIA attributes and roles:

html
<nav aria-label="Pagination">
  <ul class="reset-list pagination flexbox">
    <li class="me-10">
      <a href="#" class="btn" aria-label="Previous page">Previous</a>
    </li>
    <li class="me-10">
      <a href="#" class="btn square primary" aria-current="page">1</a>
    </li>
    <li class="me-10">
      <a href="#" class="btn square">2</a>
    </li>
    <li class="me-10">
      <a href="#" class="btn square">3</a>
    </li>
    <li class="me-10">
      <a href="#" class="btn" aria-label="Next page">Next</a>
    </li>
  </ul>
</nav>

Best Practices ​

  1. Use clear labels or icons for navigation controls
  2. Highlight the current page to provide context to users
  3. Consider responsive design for different screen sizes
  4. Keep pagination accessible by using proper ARIA attributes
  5. Limit the number of page links shown at once for better usability
  6. Provide context about the total number of pages or items when possible

Released under the MIT License.

Copyright 2023-present Phenix Design System