Pagination here is a “load more” pattern: a counter, a thin progress bar and a button that adds more items to a list without a page load.
The tokens, the spacing per breakpoint, the measurements and the requirements. Values come from the live token package and from Figma: Pagination.
Resolved from the live token package.
| Part | Use | Token | Value |
|---|
pagination.css writes the gaps (24px, 16px), the 190px width and the counter text (16/22, 17/24 from 769px) as pixels. The values match the spacing scale and the body-md pair, but are not yet written as tokens.
| Property | Value |
|---|---|
| Width | 190px, max-width: 100%, centered, never stretched |
| Gap: info block to button | 24px |
| Gap: counter to bar | 16px |
| Progress bar height | 2px |
| Button | Button Secondary, Medium: 40px high below 769px, 48px from 769px, full width |
The component is one size. Only the space above it steps with the breakpoint, see Measurements.
| Attribute | Value |
|---|---|
| Counter text | Body-md: 16/22 below 769px, 17/24 from 769px, letter spacing 0.32px |
| Progress bar | 2px |
| Button label | Label-lg: 16/16 below 769px, 18/18 from 769px |
The component has no padding of its own, so there is no measurement figure. The space above it is a margin and is listed below.
| Breakpoint | Space above | Token | Space below (the section) |
|---|---|---|---|
| xs, 0–639px | 24px | space-24 | 40px |
| sm, 640–768px | 32px | space-32 | 48px |
| md, 769–1023px | 40px | space-40 | 64px |
| lg, 1024–1280px | 40px | space-40 | 80px |
| xl, 1281px and up | 40px | space-40 | 80px |
The space above is page spacing, so it steps at 640px, not at space-md. The space below is the bottom padding of the section the component sits in (eco-section), never padding on the component.
The component has no states of its own. The button has the states of the Secondary button. When all items are shown, the button is disabled (Figma Secondary disabled) and the counter and the bar show the full count.
| Element | Style | Mobile | Desktop (769px) |
|---|---|---|---|
| Counter text | body-md, regular, 0.32px | 16/22 | 17/24 |
| Button label | label-lg, bold, uppercase | 16/16, 0.32px | 18/18, 0.18px |
| Element | Class | Notes |
|---|---|---|
| Component | pagination (+ id="pagination-{key}") | Flex column, 190px, centered. The button is disabled when all items are shown. |
| Info block | pagination__info | Counter and bar. |
| Counter | pagination__count | Holds <span id="{key}-pagination-count">. |
| Progress | pagination__progress | The 2px track. |
| Fill | pagination__progress-bar (+ id="{key}-pagination-bar") | Width set by script. |
| Button | btn btn--secondary btn--md | The eco-button, full width of the component. |
190px, or the width of the parent when that is narrower.
| Property | Token | Value |
|---|---|---|
| Fill width | ease-standard | Changes over duration-medium-2 |
The width change is a state change in place, so it uses the standard easing. Reduced motion is not handled in the component CSS (open point).
| Topic | Rule |
|---|---|
| Fill width | Always (visible / total) × 100%, set by updatePagination(key, visible, total). The first value may be rendered by the server. |
| All shown | The disabled attribute goes on the button. The component is never hidden and the button never removed. |
| Ids | The script reads {key}-pagination-count, {key}-pagination-bar and pagination-{key}. |
| Breakpoint | Text and button change at 769px. The space above changes at 640px and 769px. |
| Topic | Requirement |
|---|---|
| Button | A native <button> with a specific label (“Show more reviews”). Keyboard: Tab, Enter, Space. Visible focus ring from eco-button. |
| Status message | Put aria-live="polite" on the counter so the new count is announced without moving focus (WCAG 4.1.3). |
| Progress bar | It repeats the counter, so give it aria-hidden="true". Never rely on the bar alone (WCAG 1.4.1). |
| Focus | A button that becomes disabled loses focus: move focus to the first item that was just loaded (WCAG 2.4.3). |
| Contrast | Counter text is Surface 60 on white. The track (Surface 10) is decoration, the count carries the meaning. |