Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
You can make a very simple pagination container with just the Previous and Next buttons. Add the class
disabled to the
Previous button if there isn’t a preceding page, or to the
Next button if there isn’t a succeeding page.
For pagination across multiple pages, make sure it’s clear to the user where they are in a set of pages.
To do this, add anchor links to the
pagination element. Previous and Next buttons should always be present. Add the class
disabled to the Previous button if you’re on the first page. Apply the class
current to the current numbered page.
As always, make sure to include the appropriate
aria attributes to make the element accessible.
aria-label="Pagination"to the the
aria-current="true"to the current page marker.
aria-label="Page X"to each anchor link.