Design System React
Pagination
JSX for this example
<React.Fragment />Pagination at a middle page
JSX for this example
<React.Fragment />Pagination with larger padding
JSX for this example
<React.Fragment />Pagination configuration
Pagination components can use the following props:
ariaLabel(optional)- Text to use for an
aria-labelattribute on thenavelement. Default is ‘Pages’. className(optional)- A CSS class name to pass to the component.
linkComponent(optional)- Function that returns an element, to customise the output. Used on all links in the pagination.
onClick(optional)- Function to fire in response to a click event on pagination links.
padding(optional)- Number of other pages to show on either side of the current page. Default is 1.
page- Current page number.
pattern(optional)- A regex-ish pattern to use for the pagination links. The string
$1will be replaced with the page number.
Default is/search?page=$1. totalPages- Total number of pages.