Pagination

Controls for moving through long results a page at a time. Five bars (icon arrows, a Page 1 of 26 jump, Previous and Next, a Go to field, and a skeuomorphic pill), a rows-per-page picker, and the page cells they share.

import { PaginationGroup } from '@orvain/react';
 
<PaginationGroup
  groupType="01"
  pageCount={10}
  page={page}
  onPageChange={setPage}
/>
 
// Uncontrolled
<PaginationGroup groupType="01" pageCount={10} defaultPage={3} />

Add an Orvain Pagination (group type 01) for 10 pages on page 1: first and previous buttons, pages 1, 2, 3, an ellipsis and 10, then next and last buttons.

Orvain MCPIncluded with the library

When to use#

Below tables and lists with more results than fit on one page.
When people need to jump to a specific page or return to the same place later.

When not to use

Use load more, or scroll to load, for a feed people browse.
Use a Dot Stepper for a short linear sequence of steps.

Anatomy#

1Bar

White, 32px in and 20 tall around the controls, radius 24; it wraps by group when narrow.

2Arrows and Previous/Next

48px flat buttons on #f2f2f2, radius 12; the pill bar uses dark round ones.

3Page cells

36 tall, 15px in, radius 8: the first three, the last, and the current page with its neighbours, gaps shown as …

4Jump controls

A Page [n] of 26 select, a Go to field that takes a number and Enter, or a Go to page select with a Go button.

5Rows per page

A grey bar of 5, 10, 20; the chosen one lifts white and reads 10 rows.

States#

First, All and Last Active

Which page is current; the arrows at an end disable.

Cell appearance

Outline, Fill White or Fill Black; the current cell is white with a dark ring, or solid #2a2a2a.

Hover

The cell takes a wash and a darker stroke.

Size and Pill

Cells are 36, 32 or 28 tall, square-cornered or round.

Disabled

Grey #f2f2f2 with #cbcbcb text.

Source#

Preview – final code pending

The Pagination is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

pagination tables