Skip to content
Origami Design System

Pagination

Pagination aids user movement across an ordered collection of items that has been split into pages.

  • We provide infinite scrolling guidelines, as an acceptable alternative for some usecases.
  • Our pagination pattern shows a variable number of pages to accommodate mobile and desktop experiences.
  • This pattern is available via your brands Figma library and our o3-button npm package.

Standard Pagination

Anatomy

previous results1234...910123...10next results
  • Navigation (1, 5): Previous and next buttons to navigate relatively from the currently selected page.
  • Page (2,3): Numbers that indicate pages.
  • Truncation (4): Indicated by ellipses (…) to replace any skipped pages.

Usage Guidelines

Pagination should be used when:

  • A list has a significant number of items, typically more than 25.
  • When showing all the content on a single page makes the page take too long to load.

It must:

  • Be placed at the bottom of a long list that has been split up into pages.
  • Navigate to the previous and next set of items in the paged list.
  • Indicate when users are at the first or the last page by disabling the arrows.
previous1...456...101...5...10next
<ButtonPagination
  currentPageOnly={false}
  previousPager={{ label: "previous", href: "#previous" }}
  nextPager={{ label: "next", href: "#next" }}
  pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((p) => ({
    href: `#${p}`,
    current: p === 5,
    number: p,
  }))}
/>;
Open in StoryBook | Open in Figma

Current page only

Show the current page only when jumping quickly to the beginning or end of results does not enhance the user experience.

Example
previous2next

Contextual pages

For enhanced navigation of pages, including the ability to jump to the first and last page, use the following pattern:

When all pages can be displayed

Our pagination pattern supports 4 pages on small viewports, such as mobile devices, and 7 pages on larger desktop viewports. When there are more than 7 pages, we hide pages behind an ellipsis.

Example
previous1234567123...7next

When the selected page is one of the first 2 pages

Show the first 3 pages; ellipsis; and the last 1 or 3 pages, as space allows.

Example
previous123...8910123...10next

When the selected page is one of the last 2 pages

Show the first page, or first 3 where space allows; ellipsis; and the last 3 pages.

Example
previous123...89101...8910next

When the 3rd page is selected

Show the first 3 pages, or 4 pages where space allows; the ellipsis; and 1 or 2 more pages, as space allows.

Example
previous1234...910123...10next

When the selected page is the 3rd from the last page

Show the first page, or first 2 pages where space allows; the ellipsis; and 3 or 4 last pages, as space allows.

Example
previous12...789101...8910next

When the selected page is over 3 from the first and last page

Show the first page; ellipsis; the selected page, with 1 page either side if space allows; another ellipsis; and the last page.

Example
previous1...456...101...5...10next

Themes

Our pagination pattern supports all button themes. For example:

Standard Theme

previous1...456...101...5...10next
<ButtonPagination
  currentPageOnly={false}
  previousPager={{ label: "previous", href: "#previous" }}
  nextPager={{ label: "next", href: "#next" }}
  pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((p) => ({
    href: `#${p}`,
    current: p === 5,
    number: p,
  }))}
/>;
Open in StoryBook | Open in Figma

Inverse Theme

previous1...456...101...5...10next
<ButtonPagination
  currentPageOnly={false}
  previousPager={{ label: "previous", href: "#previous" }}
  nextPager={{ label: "next", href: "#next" }}
  pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((p) => ({
    href: `#${p}`,
    current: p === 5,
    number: p,
  }))}
  theme="inverse"
/>;
Open in StoryBook | Open in Figma

Infinite scroll

There are some cases when infinite scroll is appropriate. This is a common pattern within our iOS and Android apps. Origami does not currently provide a full pattern for this, however we recommend the following:

  • Where infinite scrolling is used, start loading items when merchants are close to the bottom, roughly 5 items from the end.
  • Show our legacy loading indicator below the list to indicate that items have been requested.
  • After more results have been fetched, they should load in below.
✅ Choose infinite scroll when
  • You’re working on a native application, with an established pattern.
❌ Avoid infinite scroll when
  • You’re working on the web, where it is not an established pattern for us, unless user research shows they improve your interface. - It interferes with access to content below, such as our footer. - Where returning to or sharing a given pages is helpful.