Pagination

Overview

Pagination provides navigation controls for moving through multi-page content, data tables, and long lists. Its 8 layout variants cover every context, from full numbered navigation and grouped controls to compact pagers for tight layouts. Built from the Button and Button Group components, it inherits their interaction states, sizing, and token logic automatically.

When should you use them?

Use pagination when content is split across multiple pages and users need to move between them, like a data table, search results, or a long list. Choose a full numbered variant when users benefit from jumping to a specific page, or a compact pager when space is tight.

How should you use them?

• Use pagination for multi-page content; use infinite scroll for continuous feeds where page numbers don't matter.
• Pick the variant for the context: full numbered for direct page access, compact pager for tight spaces.
• Show the current page clearly so users always know where they are.
• Toggle on page status or page select only when users need them, to keep the control clean.
• Keep previous and next controls disabled at the first and last page.
• Keep controls keyboard-navigable and label them for screen readers.