Skip to main content

Pagination

Split content or data into multiple pages and display one page at a time.

Pagination comes in two variants: page select and page input.

View in StorybookExternal link icon

Usage​

  • Consider using a page selector if you have fewer than eight pages.

  • Consider using a page input if you have nine or more pages.

  • Consider using a pagination control when implementing pagination for a dataset with multiple items. This way, you can let users know how many items there are in the dataset and choose how many of them to display per page.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the visual hover state of the Page item and chevrons, adding a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

The pagination supports the common keyboard interactions, using the Tab key to select the element and using the Enter key to activate an in-focus element.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.