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.
Every example on this page is the real component, not a picture. Figma: Pagination.
A list of reviews with the real component under it. Press the button to load 10 more items at a time (10, 20, then 22 of 22): the counter and the bar follow, and the button becomes disabled when everything is shown.
Pagination here is a “load more” pattern: a counter, a thin progress bar and one button that adds more items to a list without a page load. It tells the user how far through the list they are and gives one clear way to continue.
The component is narrow (190px) and centered, whatever the width of its section. It has one layout and no variants. The counter and the bar come from two numbers, the items shown and the total, so the total must be known up front.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use pagination. Specifications holds the values: tokens, spacing per breakpoint, measurements and requirements. Code shows how to add it to a list.
Use it at the end of a list that is too long to show at once. Use it to:
A counter that says “6 of 6” and a bar that is full has nothing left to offer. Keep the component and disable the button, so the user sees the list is complete.
The action is supporting, not the main goal of the page. Keep the Secondary button at Medium size.
| The list… | Use |
|---|---|
| is long, more items load on request and the total is known | Pagination (load more) |
| is already fully shown | Pagination with a disabled button |
| needs numbered pages (1, 2, 3 …) | A different pattern (not built yet) |
Pagination has no variants. It looks the same at every step of the list, only the numbers change. Three snapshots of the same component:
When every item is shown the counter and the bar are full and the button is disabled, see Behavior.
Pagination has one size: 190px wide (max-width: 100%). The button inside is Medium: 40px high on mobile and tablet, 48px from 769px. All values are under Sizes in Specifications.
The component is centered in its section and never stretched to the section width, however wide the section is. Text is centered.
Place it as the last element of the section or list it belongs to. It has no bottom spacing of its own: the padding of the section below it gives the air. Adding padding or margin below it doubles the space.
The space above the component is page spacing, so it follows the five ECO breakpoints: 24px on mobile, 32px on tablet and 40px from 769px. It steps at 640px, while the component itself keeps mobile styling until 769px. The values are under Measurements in Specifications.
Counter text in Surface 60, a Surface 10 track with a Surface 100 fill, and a Secondary button. Token names are under Design Tokens in Specifications.
A click on the button adds the next items to the list and calls updatePagination(key, visible, total). The counter text and the bar fill update together. The fill animates its width with duration-medium-2 and ease-standard.
One click loads 10 more items. The last click loads the rest: 10, 20, then 22 of 22.
When visible reaches total, the script sets disabled on the button. The counter and the bar stay, full.
Counter text and button follow mobile styling below 769px (sm looks like mobile). The space above steps at 640px and 769px.
All requirements are listed under Accessibility Requirements in Specifications.
The button is a native <button>: Tab reaches it, Enter and Space load more. It has the eco-button focus ring.
Mark the counter as a polite live region (aria-live="polite") so the new count is announced. The bar repeats the counter, so hide it from assistive technology with aria-hidden="true". A button that becomes disabled loses focus: move focus to the first new item first.