role navigation
Pagination draft v0.1.0
Lets people move between the pages of a long list, with the current page marked.
A pagination splits a long list of results into pages and lets people go to a page by its number, or to the previous and next ones. It shows which page is current. The pages are links: each one has a destination, so the browser handles history and focus. Which page numbers to show (all, a window around the current one) is the application's choice: the component renders the list it is given.
Tokens
From packages/tokens/src/components/pagination.tokens.json. Path grammar: pagination.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (1)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
pagination.container.gap
|
dimension |
{space.4}
|
4px
|
--pagination-container-gap
|
Part link (20)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
pagination.link.size.small
|
dimension |
{space.32}
|
32px
|
--pagination-link-size-small
|
pagination.link.size.medium
|
dimension |
{space.40}
|
40px
|
--pagination-link-size-medium
|
pagination.link.padding-inline.small
|
dimension |
{space.6}
|
6px
|
--pagination-link-padding-inline-small
|
pagination.link.padding-inline.medium
|
dimension |
{space.8}
|
8px
|
--pagination-link-padding-inline-medium
|
pagination.link.border-radius
|
dimension |
{corner-radius.xs}
|
4px
|
--pagination-link-border-radius
|
pagination.link.background.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--pagination-link-background-default
|
pagination.link.background.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--pagination-link-background-hover
|
pagination.link.background.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--pagination-link-background-active
|
pagination.link.background.current
|
color |
{global.bg.accent.neutral.default}
|
light
#201E1F
dark
#E8E3E4
|
--pagination-link-background-current
|
pagination.link.background.disabled
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--pagination-link-background-disabled
|
pagination.link.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--pagination-link-color-default
|
pagination.link.color.current
|
color |
{global.text.on-accent.neutral.primary}
|
light
#FDFDFD
dark
#191919
|
--pagination-link-color-current
|
pagination.link.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--pagination-link-color-disabled
|
pagination.link.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--pagination-link-typography-small-font-family--pagination-link-typography-small-font-size--pagination-link-typography-small-font-weight--pagination-link-typography-small-line-height--pagination-link-typography-small-letter-spacing
|
pagination.link.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--pagination-link-typography-medium-font-family--pagination-link-typography-medium-font-size--pagination-link-typography-medium-font-weight--pagination-link-typography-medium-line-height--pagination-link-typography-medium-letter-spacing
|
pagination.link.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--pagination-link-outline-width-focus-visible
|
pagination.link.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--pagination-link-outline-offset-focus-visible
|
pagination.link.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--pagination-link-outline-color-focus-visible
|
pagination.link.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--pagination-link-transition-duration
|
pagination.link.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--pagination-link-transition-easing
|
Part icon (7)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
pagination.icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--pagination-icon-font-family
|
pagination.icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--pagination-icon-font-weight
|
pagination.icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--pagination-icon-fill
|
pagination.icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--pagination-icon-grade
|
pagination.icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--pagination-icon-optical-size
|
pagination.icon.size.small
|
dimension |
{size.3}
|
20px
|
--pagination-icon-size-small
|
pagination.icon.size.medium
|
dimension |
{size.4}
|
24px
|
--pagination-icon-size-medium
|
Parts without tokens: listitempreviousnext (they inherit from their parent).