Pagination divides content into separate pages or sections to improve readability and navigation.
Color
| Element | Property | Color token |
|---|
| Container | background-color | $button-inverse |
| Container:active | background-color | $button-primary |
| Text | text color | $text-primary |
| Text:active | text color | $text-on-color |
| Icon | svg | $icon-primary |
| Icon:active | svg | $icon-on-color |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Text | 18 / 1.125 | Semibold / 600 | $tab-label-selected |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Container | border | 1px | – |
| | padding-left, padding-right | 20 / 1.25 | – |
| | padding-top, padding-bottom | 10 / 1.67 | – |
