Components
Pagination
Moves between the pages of a list or a table. It shows the first and last pages, the pages next to the current one and an ellipsis between.
Playground
Figma variant
Pagination
.Pagination Item › 🕹 State=Current (2)States
A page item is Default, Hover or Current; Current is the primary color. Previous and Next are small ghost icon buttons and are disabled on the first and last page.
Tokens
| Part | Token |
|---|---|
| Item | --space-xxlarge (size), --radius-form-element-small, --text-ui-text-small-bold |
| Default | --color-foreground-medium-emphasis |
| Hover | --color-surface-level-2, --color-foreground-high-emphasis |
| Current | --color-primary, --color-on-primary |
| Gap | --layout-micro |
Figma to code
| Figma | React |
|---|---|
| .Pagination Item › 🕹 State = Current | page={…} |
| .Pagination Item › 🕹 State = Hover | :hover |
| Previous / Next | previousLabel / nextLabel |