Overview
The Pagination component allows users to navigate through paginated content such as search results or long lists. It provides an intuitive way to jump between pages.
When to use
- To display a large dataset split into multiple pages.
- To offer users direct access to specific sections of content.
When not to use
- To navigate unrelated content or categories
- To navigate between Section on the same page
- To navigate to different views in the same Section use Tabs
Anatomy
- Pagination
- PaginationItem
- PaginationItem
- PaginationItem
Variants & States
State
PaginationItems are designed with four interactive states:
- Default: The basic, inactive appearance of a pagination item.
- Hover: Changes visually when a user hovers over it, signaling interactivity.
- Active: A brief state when the item is clicked or pressed.
- IsCurrent: Highlights the current page, indicating the user’s location in the pagination.
Internationalization
For RTL (right-to-left) languages, no custom adjustments have been made.
Properties
| Name | Type | Values | Description |
|---|---|---|---|
| current | Number | 1 |
Tracks the currently active page. |
| total | Number | 1 or greater | Total number of pages in the dataset. |
Usage Guidelines
DoOnly use the provided styles for the pagination.
Don’tDon't change the default stylings for color, text or borders to create a new look.
Content Guidelines
We don’t use pagination in our apps. Instead, the pages are scrollable. On the web, we use pagination more often, for example, in our blog.
Voice and tone
- If pagination is used, it’s in decimal numerals and accompanied by a native and design-approved style.
- We use simple numbers — no additional punctuation marks needed.
Do1 2 3 … 10
Don’tI II III … X