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 to provide a label.
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.
To keep the design simple, a maximum of 7 pages are displayed above tablet screen sizes. On mobile only the current page along with the next and previous links are displayed.
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.