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 neccessary for it to have an aria-label.
Translation hint 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.
The number of pages displayed can be limited using the pageLimit prop.
The label text for the navigation links can be customised using the previousLabel and nextLabel props.
Translation hint 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.
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)
    },
  })}
/>
When inside a Card, the outline of the Pagination’s active page is omitted since the background has sufficient contrast without it.