Pagination

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Variants
  3. Sizes
  4. Theme
  5. Configuration
  6. Space
  7. Interaction states
  1. Style
  2. Variants
  3. Sizes
  4. Theme
  5. Configuration
  6. Space
  7. Interaction states

Style

Pagination is a horizontal row of square containers that include a control button or page number in the middle. A maximum of seven pages can be displayed before truncation and the appearance of the page input field. The page input field includes a text label, field, and link to the last page. Pagination with truncation must include a page input field so users can access hidden pages.

Anatomy

Pagination anatomy with lots of annotations
  1. First page
  2. Previous page
  3. Inactive page
  4. Active page
  5. Next page
  6. Last page
  7. Navigation controls
  8. Truncation
  9. Page input field
  10. Page numbers

Variants

Box variant

The box variant shows a background color for each page number and navigation control. When a page is active, a blue border appears at the top of the button.

Truncated pagination with 50 pages and an input on the right hand side.

Open variant

The open variant has transparent backgrounds for all buttons. The active state for a page number shows a blue border on the bottom.

Truncated pagination with 50 pages and an input on the right hand side. This version is 'open' where there is no background color to denote a box to click on.

Sizes

There are two available sizes: Default and Small.

Default

The default pagination button size is --rh-size-icon-4.1.

A truncated pagination with 50 pages and an input below the pagination.

Small

The small pagination button size is --rh-size-icon-03. The page input field size does not change.

A small sized truncated pagination with 50 pages and an input to the right of the pagination.

Theme

Pagination is available in both light and dark themes. Consumers should strive to place Pagination only on lightest and darkest surface colors to prevent background colors of the box variant from bleeding into the surface background color.

Light theme

Light theme pagination Light theme pagination open variant

Dark theme

Darkest theme pagination Darkest theme pagination open variant

Configuration

The page input field can be horizontally or vertically centered with pagination.

Pagination construction showing horizontal and vertical alignment

The width of page number buttons, navigation control buttons, and truncation stays the same.

Pagination construction showing button widths for normal and size SM versions.

Compact Configuration

Compact pagination omits the page numbers and moves the page input field between the navigation controls. This should be used occasionally and only in layouts with very little space for a pagination element.

Helpful tip

If you have enough space, the mobile version, which has the full page input field to the right or below, is preferred.

The compact configuration comes in both the box and open variant styles. It’s also available in the default and small sizes.

Four paginations. All compact. Two normal sized and two small sized. Box and open. Same as above but dark color palette.

Active page

Styles for the active page are different from inactive pages so users can see their location. In the box and open variants, active pages show a blue border either at the top or bottom. Active page styles do not apply to control buttons because they are not page numbers.

Helpful tip

Active page styles are not visible in the compact configuration because there are no page numbers.

The examples below show active page styles for page 4.

Two light theme paginations; both are showing an active page of 4. Normal and open variants. Two dark theme paginations; both are showing an active page of 4. Normal and open variants.

Space

Space values are the same for both sizes, both variants, and on all viewport sizes.

Pagination spacing for both sizes and variants.

Spacing between buttons and the page input field stays the same, whether the input field is to the right or below.

Pagination spacing between the numbers and input field.

The compact configuration maintains the 2px spacing between the navigation controls, and the spacing for the page input field remains the same as well. There is a large space (var(--rh-space-lg, 16px)) on either side of the page input field.

Pagination spacing for the compact version with stepper buttons and input in the middle.

Interaction states

Interactive elements include control and inactive page buttons, the page input field, and last page link.

Hover

Control and inactive page number buttons have the same hover state. Truncation is not interactive so it has no hover state.

Light theme pagination hover states Dark theme pagination hover states

Focus

Light theme pagination focus states Dark theme pagination focus states

Active

Light theme pagination active states Dark theme pagination active states
Edit this page on GitHub