Pagination Component

Axiom01's pagination component provides a clear and accessible way to navigate through large sets of content, breaking it down into manageable pages. It's designed to be flexible and easily integrated into any list or table display.

Live Example

HTML Structure

The pagination component uses a semantic <nav> element with an unordered list of links.

<nav aria-label="Page navigation example">
<ul class="pagination">
    <li><a href="#" class="button small">Previous</a></li>
    <li><a href="#" class="button small">1</a></li>
    <li><a href="#" class="button small primary">2</a></li>
    <li><a href="#" class="button small">3</a></li>
    <li><a href="#" class="button small">Next</a></li>
</ul>
</nav>

Styling

The .pagination class applies basic flexbox styling to arrange the list items horizontally. Individual page links are styled as small buttons for consistency with other interactive elements.

  • The .pagination class on the <ul> element.
  • Each page item is an <li> containing an <a> tag.
  • Apply .button.small to each link for consistent button styling.
  • Use .primary on the active page link to highlight it.

Accessibility

Axiom01's pagination component is built with accessibility in mind:

  • The <nav> element has an aria-label to describe its purpose to screen readers.
  • Each link should ideally have a clear text label (e.g., "Previous", "Next", "Page 1").
  • The active page should use aria-current="page" to indicate its current state.
  • All pagination items are keyboard focusable and operable.

Customization

Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. You can adjust the size of the buttons, the spacing between them, and their colors to match your theme.