| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
A control without fill or border |
color-text-default |
| Hover |
Yes |
A light fill |
color-action-subtle-hovered |
| Pressed |
Yes |
Scales to 97 %; the fill darkens |
motion-press-scale, color-action-subtle-pressed |
| Focus |
Yes |
A 2 px ring, 2 px away |
color-focus-ring, border-width-focus |
| Current page |
Yes |
A selected surface and a strong border; aria-current="page" |
color-surface-selected, color-border-strong |
Inactive (an end, disabled) |
Yes |
Disabled colours; aria-disabled, still focusable |
color-action-disabled-default, color-action-on-disabled-default |
| Loading |
With disabled |
Every control is inactive |
- |
| Error |
No |
Pagination does not show errors |
- |
| Property |
Value |
Token |
Item height, md |
36 px |
button-height-md |
Item height, sm |
32 px |
button-height-sm |
| Minimum page width |
equals the height (square) |
button-height-md, button-height-sm |
| Between items |
2 px |
space-xxs |
| Horizontal gap between groups |
24 px |
space-3xl |
| Summary style |
12 px / 16 px, tabular figures |
body-sm |
| Page and counter style |
14 px / 20 px, medium weight, tabular figures |
label-md |
| Switch to side by side |
1024 px |
- |
| Page items (long list) |
2 × boundaryCount + 2 × siblingCount + 3 |
- |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-border-strong | | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c |
--bigbang-color-action-subtle-hovered | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-color-action-subtle-pressed | | #ededed#ededed#ededed | #404040#404040#404040 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-button-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-button-height-md | | 36px36px36px | 36px36px36px |
--bigbang-space-xxs | | 2px2px2px | 2px2px2px |
--bigbang-motion-press-scale | | 0.970.970.97 | 0.970.970.97 |
--bigbang-motion-hover-duration | | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
| Interaction |
Motion |
Reduced motion |
| Press |
scale drops to 97 % (70 ms) and springs back on release (motion.press) |
Scale is 1; only the colour changes |
| Hover, current page |
The fill colour changes over motion-hover-duration (110 ms) |
Same |
| Focus |
The ring appears at once (0 ms) |
Same |
| Summary range changes |
The new text fades opacity 0 → 1 over motion-skeleton-reveal-duration (110 ms) (motion.reveal) |
The same short fade |
| Page list changes |
No motion |
Nothing to reduce |
Values come from tokens; see Motion for details.