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:
Previous / next buttons only
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 @import 'vanilla-framework/scss/vanilla'; @include vf-base; @include vf-p-pagination; // pagination uses icons for previous and next page buttons @include vf-p-icons-common; @include vf-p-icon-chevron;
Article pagination component
To import the article pagination component into your project, copy the snippet below and include it in your main Sass file.
@import 'patterns_article-pagination'; @include vf-p-article-pagination;
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