Pagination

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

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

Sizes

There are two available sizes and the only difference is the Compact size does not display page numbers.

Helpful tip

The Compact size always includes the page input field.

Theme

Pagination is available in both light and dark themes.

Light theme

Dark theme

Configuration

Pagination is a collection of navigation elements including controls, page numbers, and a page input field. The page input field can be horizontally or vertically centered with pagination. The amount and width of square containers is always the same. Each container is 50px x 50px. In Full size pagination, there are 11 squares at 570px combined width and in the Compact size, there are four squares at 206px combined width.

Active page

Styles for the active page are different from inactive pages so users can see their location. Active page styles do not apply to control buttons either because they are not page numbers.

Helpful tip

Active page styles do not apply to the Compact size because there are no page numbers visible.

Space

Space values between elements are the same for both sizes and on all breakpoints.

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.

Focus

Active