Pagination

Accessibility

Renders a semantic nav element to encapsulate the pagination links. Given this is a Landmark Region, in order to comply with the General Principles of Landmark Design it is necessary for it to have an aria-label. The aria-label can be customised by providing the label prop.Given Pagination is presented semantically as a list of links, the Next and Previous links have defined their relationship to the current page by providing the rel attribute with their respective values.

Limiting the number of pages

The number of pages displayed can be limited using the pageLimit prop.

To keep the design simple, only the current page, next and previous links are displayed on mobile, while on larger devices the limit cannot be increased above the default limit of 7.

Open in Playroom

Customising the labels

The label text for the navigation links can be customised using the previousLabel and nextLabel props. The aria-label for the page links can be customised by providing a function to the pageLabel prop. The function receives the page number should it be required for interpolation.

Open in Playroom

Development considerations

It is a requirement that you have set up linkComponent on your BraidProvider.You must also provide a linkProps function to transform the page number into Link props.

{setDefaultState("page", 5)}

<Pagination
  page={getState("page")}
  total={10}
  label="Pagination of results"
  linkProps={({ page }) => ({
    href: `#${page}`,
    onClick: (e) => {
      e.preventDefault()
      setState("page", page)
    },
  })}
/>

Open in Playroom

Contextual design

Only applicable to themes with grey body backgrounds, e.g. apac.

When Pagination is used on a surface background colour, i.e. in a Card, the outline of the active page indicator is omitted.

Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.

<Pagination
  data={{ testid: 'pagination-1' }}
  // => data-testid="pagination-1"
/>

Open in Playroom

Braid Logo