Pagination

Use the pagination component to paginate large sets of data:

Truncated

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:

Disabled controls

Disable or omit the previous and next buttons when displaying the first or last page of the paginated set:

Article pagination

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:

Import

Pagination component

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';
@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.

React

You can use pagination in React by installing our react-component library and importing Pagination or ArticlePagination component.

See the documentation for our React Pagination component

See the documentation for our React ArticlePagination component