Pagination

Displayed below tables when there are a significant number of table rows.

Guidelines

  • Pagination is centrally aligned, with a top margin of 30px.
  • If the user is on the first page of table results, the ‘Back’ button is disabled. If they are on the last page of table results, ‘Next’ is disabled.
  • The current page of results has an active state applied to it.
  • If ≤ 7 pages, no need for truncating the pagination (adding "...").
  • If a page ≥ 5 is selected, the first page should be available to the left and last page should be available to the right. The first and last page should always be visible.
  • An ellipses (...) is shown between non-consecutive pages, using the disabled state style, but the ellipses itself has a 100% opacity, as opposed to 10%.

PaginationPaginationPaginationPaginationPaginationPaginationOn-hoverOn-focus

/* Pagination */
border-radius: 5px;
background: $white;
border: 1px solid $gray40;
height: 38px;
padding: 0 20px; /* on each toggle option */

/* Numerical/text 'cell' */
padding: 0 15px;
font-family: Helvetica;
font-weight: regular;
font-size: 13px;
color: $black50;

/* Hover */
background-color: rgba($black, 0.02);

/* Focus */
background-color: rgba($black, 0.05);

/* Disabled */
(same as disabled state for buttons)

/* Null (“...”) */
background: none;

/* Active */
(same as primary button style)

Note: All CSS shown is for guiding purposes, it's not absolute. It's intended to help designers foster a greater understanding of both CSS and the specifications.

See also: Primary button


Pagination on mobile

On mobile the numerical pagination is replaced by a disabled “1 of XX” segment, in-between a ‘Back’ and ‘Next’ button.

Pagination on mobile

/* Pagination (on mobile) */
(each tab is ⅓ width of space available to it)

results matching ""

    No results matching ""