Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Version: Canary 🚧

Change log

Components

Pagination

Overview

When to use

Use pagination to separate large lists of content, such as search results, into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming.

Consider using pagination when a listing exceeds 20 results.

When not to use

Do not use pagination component for linear journeys – for example, showing progress in multi-page forms.

Principles​

Add the pagination component after the content on each page that you're paginating.

Show an appropriate number of pages to fit the horizontal space available.

For large and medium screens, show page numbers for:

  • the current page
  • at least two pages immediately before and after the current page
  • first and last pages

For smaller screens, show page numbers for:

  • the current page
  • first and last pages

Do not show the previous page link on the first page and do not show the next page link on the last page.

Do not show pagination if there's only one page of content.