Components

Pagination

Pagination helps users move through large collections one page at a time. It shows the current page, adjacent pages, and skipped ranges, along with controls for next and previous.

Pagination with page numbers one to ten

Usage

Use Pagination when a collection is too large to fit in a single view and the user needs a consistent way to navigate through it. Don’t use it when a load-more pattern is the expected interaction.

A long list of items with pagination below it
Use pagination when the user needs to navigate a long, ordered collection of items.
A short list of three items with pagination below it
Don’t use pagination when the number of items can comfortably fit in a single view.
Pagination placed directly below the list it controls
Keep pagination close to the paginated content so users can clearly understand what the controls are related to.
Pagination separated from the list by unrelated content
Don’t place pagination far from the list content it controls or separate it with unrelated content.

Formatting

Variants

Pagination is available in two variants: Default and Simple. Default gives direct page access and works well when horizontal space is available. Simple uses only previous and next buttons alongside a text indicator, and suits constrained spaces or cases where direct page selection is less important.

The default variant with page numbers and the simple variant with a text indicator

Anatomy

The default variant consists of previous and next icon buttons, numbered page buttons, and optional ellipsis symbols for truncated ranges.

Default variant

Anatomy of the default variant
  1. Previous and next buttons
  2. Page item (selected)
  3. Page item (not selected)
  4. Ellipsis indicating truncated pages

The simple variant consists of previous and next icon buttons and a text area showing the current and total page count.

Simple variant

Anatomy of the simple variant
  1. Previous and next buttons
  2. Current page
  3. Total number of pages

Page item states

Page item states in both selected and not selected configuration

Page item states, in both selected and not selected configuration.

  1. Default
  2. Hover
  3. Pressed
  4. Focus
  5. Disabled

Behaviour

Truncation

The default variant displays 7 entries plus previous and next. In this configuration, the component can display the current, first, last, adjacent page(s), along with the ellipsis symbol on both sides.

When the number of pages exceeds the available buttons (7), extra ranges are hidden behind an ellipsis. Which ranges are truncated depends on the user’s position. Ideally the current, adjacent, first, and last pages are always visible.

Examples of ranges of pages being skipped in the list, depending on the current position

Examples of ranges of pages being skipped in the list, depending on the current position.

Pagination with truncated ranges on both sides of the current page
Truncate ranges when the collection is too large to show in a single view.
Pagination truncated even though all pages would fit
Don’t truncate ranges if all buttons can fit within the range.

Space-constrained layout

When all 7 buttons don’t fit horizontally, the adjacent items can be omitted.

Pagination with the adjacent pages omitted

Example showing navigation buttons omitted due to limited horizontal space.

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se