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