Pagination

Basic

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Disabled & active states

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation.

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Alignments

Change the alignment of pagination component with flexbox utilities.

Borderless

Borderless pagination removes the default borders between pagination items, giving a cleaner and more minimal look while keeping the navigation fully functional. It’s ideal when you want pagination controls to blend seamlessly with the surrounding design.

Navigate

Navigate pagination uses previous and next buttons to move step by step. It’s best for wizards, forms, or simplified page navigation in your admin panel.

Arrow

Arrow pagination uses directional icons instead of text to navigate between pages. It offers a cleaner, more compact look and is ideal for modern interfaces where space-saving design is important.

Arrow Borderless

Arrow borderless pagination combines minimal arrow-based navigation with a clean, border-free design. It creates a sleek and modern look, keeping the focus on the content while still offering easy page navigation.

© Aquiry.
Crafted with by Codebucks