Pagination

Use Pagination to let users navigate through content broken down into pages. Usually paired with tables, but works with other types of page content.

Usage

When to use

• To break down large content into pages. Usually paired with tables, but works with other types of page content.

When not to use

• As a navigation control for a flow or to pair with a stepper, i.e. for a guide, tutorial, or setup flow.
• As a controller to switch between multiple views. Use Tabs instead.

Numbered vs Compact

Cursor and offset are the most common types of pagination. Currently, most HashiCorp products use cursor-based navigation.

Cursor navigation allows users to navigate to the next or previous set of records no matter where the user is located within the dataset (record 1 or 300). With this type of pagination, the system doesn’t know which page the current page is and can’t show page numbers (1, 2, 3, etc…). If your product supports it, you should use compact pagination.

Offset or page-based pagination allows you to divide datasets into pages, letting users navigate to any particular page. If your product supports it, you can use either numbered or compact pagination. In most cases, the numbered pagination provides a better user experience. It allows users to jump between pages and always return to the first page or go to the last page without navigating through the pages manually.

• Supported by offset (page-based) pagination.

• Supported by offset and cursor based pagination.

Spacing

• When using the pagination bar, the container should be flush on the left & right with the content.
• When using the pagination, the component should be center aligned with the content it relates to.
• Make sure there’s enough distance and breathing room between the pagination and unrelated content (e.g. another section below it), so it’s clear what content the pagination is paired with.

When pairing the pagination or pagination bar with tables, we recommend:

• 16px between the pagination or pagination bar and the content it relates to.

When pairing with content which is not contained (e.g. cards, lists), we recommend:

• At least 16px for consistency. If your product uses a scale where the spacing between elements tends to be higher or lower, or the paginated content looks optically loose or tight to the component, increase or decrease the spacing accordingly.

How to use this component

{basic invocation details}

<Hds::Alert @type="inline" as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Variant/property name

{description}

<Hds::Alert @type="page" as |A|>
  <A.Title>Title here</A.Title>
  <A.Description>Description here</A.Description>
</Hds::Alert>

Component API

Showcase

Anatomy

Pagination

Pagination Nav

Pagination Info

Size Selector

States

Default

Selected

Conformance rating

When used as recommended, there should not be any WCAG conformance issues with this component.

Explain how the component is conditionally conformant. For example, any component that offers text truncation is conditionally conformant- it is conformant as long as the text truncation feature is not used.

The Component Name component is not WCAG-conformant on its own. (Explain how to use it in a conformant way)

Best practices

Keyboard navigation

In most cases, the numbered pagination provides a greater user experience. It allows users to jump between pages and always return to the first page or go to the last page without navigating through the pages manually.

If your product only has cursor pagination, it won’t be able to support the numbered variant. Only applications with offset pagination can implement the numbered pagination variant.

Focus and move between pagination controls.

tab

Trigger button to navigate to another page.

enter

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG success criteria:

Support

If any accessibility issues have been found within this component, please let us know by submitting an issue.