Pagination

Large numbers of items can overwhelm users and prevent them from finding what they’re looking for. Separating the items out into separate pages can help users focus on a few choices at a time.

Use pagination to show users there’s more for them to explore when they’re ready without being buried in too many options.

Component status

Figma

Designing

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Content structure

Guidelines   

Use for many items

Pagination is great at breaking up large numbers of similar items into smaller groups. You don’t need to hide items behind pages when they can all fit in a single manageable view.

Generally, use pagination if you have more than 25 or so items to display.

Look & feel

Ellipses

When the number of pages gets too large, displaying them all would be overwhelming. So if the total page count is 8 or higher, the pages appear compactly. Ellipses replace some pages so a reasonable number are shown.

import Pagination from "@kiwicom/orbit-components/lib/Pagination";

() => {
  const [currentPage, setCurrentPage] = React.useState(6)
  return (
    <Pagination
      pageCount={12}
      onPageChange={(selectedPage) => setCurrentPage(selectedPage)}
      selectedPage={currentPage}
    />
  )
}

Disabled buttons

While we generally recommend against using disabled buttons, they are used in pagination on the first and last page. If the buttons were hidden, it would cause the other ones to jump around on the page.

With all of the other buttons next to the disabled one, it should be clear enough to users what they need to do to enable the button. So in this case it should work without major issues.

Responsive design

In small spaces, a list of pages would take up too much space. So for small screens, the complete list of buttons for each page is hidden. Instead, only the current page and total page count are show with the previous and next buttons.

import Pagination from "@kiwicom/orbit-components/lib/Pagination";

() => {
  const [currentPage, setCurrentPage] = React.useState(2)
  return (
    <Pagination
      pageCount={7}
      onPageChange={(selectedPage) => setCurrentPage(selectedPage)}
      selectedPage={currentPage}
    />
  )
}

Related components

Table

Lists present a very simple grouping of information. If you need more complex structures, consider presenting them in tables.

Checkbox/Radio

Lists are good for groups of related information. If there are choices associated with the information, use checkboxes or radio buttons to enable interaction.