Use the pagination component to paginate large sets of data:
Use the truncated version when the number of pages is too large to comfortably display a button for each page:
If the total number of pages is not known, you may use the previous / next buttons only. Consider using text labels in addition to the chevrons:
Disable or omit the previous and next buttons when displaying the first or last page of the paginated set:
In some cases, providing information about the previous / next item in the set may be more important than being able to quickly jump to an arbitrary page. Examples of this could be chronologically ordered blog posts, articles, a sequence of instructions that need to be performed in a sequence, etc. In those cases, consider using the article pagination pattern:
To import the pagination component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
// pagination uses icons for previous and next page buttons
To import the article pagination component into your project, copy the snippet below and include it in your main Sass file.
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
You can use pagination in React by installing our react-component library and importing