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 quckly 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 'patterns_pagination';
@include vf-p-pagination;

// pagination uses icons for previous and next page buttons
@import 'patterns_icons';
@include vf-p-icons-common;
@include vf-p-icon-contextual-menu;

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.