Pagination
Also known as: Page navigation, Next/previous button
Resources
Properties
| Property | Values | Default |
|---|---|---|
Has navigation Boolean | true | false | true |
State Variant | Default | Hover | Focus | Default |
Selected Boolean | true | false | false |
Label Text | string | 1 |
When to use
There is a large amount of content that needs to be split across multiple pages.
The content is not loaded dynamically.
Users may need to jump to a specific page.
Infinite scrolling or a “Load more” button provides a better user experience.
The pages don’t have a logical sequence, for example independent categories instead of continuous content.
Size
Dimensions of the breadcrumb are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
scale.css
--scale-width-<size>
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>