Pagination

Pagination provides users with a quick and flexible way of navigating through long lists or pages of content.

Overview

Pagination is a user interface pattern that divides content into separate pages. It prevents pages from becoming too long and overwhelming and can reduce page load time.

No results found.

Show
records/page
of 1 pages
Displaying 1-5 of 27 records
Show
records/page
of 6 pages

Design and Layout

By default, the pagination component allows users to navigate between pages and control how many records display on each page. Users can navigate through the pages by using the next and back arrows or by entering a page number of their choice and adjust the number of records displaying per page with the pagination select.

Use the actions slot to add search inputs or enable filtering with multi-selects, filters, and overlay panel filters.

Anatomy

ElementDescription
1. Pagination Header Container for results labels and actions
2. Results Label Indicates the number of results currently displaying out of the total number of records; controlled by props resultsLabelPrefix, resultsLabelSuffix, resultsCurrent, and resultsTotal
3. Actions Slot Slot for multi-selects, filters, search inputs, or overlay panel triggers
4. Pagination Results Slot Default slot for HTML elements or Indigo components, such as data tables
5. Pagination Controls Container for the pagination select, navigation, and related labels
6. Pagination Select The pagination select allows users to control how many results display per page; the pagination labels and select are controlled by props selectLabelPrefix, selectLabelSuffix, selectAriaLabel, and selectOptions
7. Pagination Navigation Includes forward and back icon buttons and an input where users can type a specific page number; controlled by props paginationLabelSuffix, paginationCurrent, and paginationTotal

Mobile

The pagination component is responsive to screen sizes. At smaller viewports (< 601px), the pagination select and related labels are hidden and the pagination navigation becomes more prominent. The touch target area of the navigation buttons and input increase to accommodate touchscreens.

Dos and Don’ts

Do
  • Do use pagination when a list, such as a data table, has many items (i.e., more than 25) or to optimize page real estate.
  • Do use pagination to display search results clearly and efficiently.
  • Do implement pagination to allow easy navigation through a photo or video gallery.
Don't
  • Don't use pagination for content that should be viewed in a pre-determined order, such as forms or an individual article. Users may accidentally skip over important content.

Accessibility

  • Include aria-label attributes on Pagination control elements as descriptive labels:
    • <select aria-label="Page Limit"...
    • <a href="#" aria-label="Previous Page"...
    • <input aria-label="Page Number"...
    • <a href="#" aria-label="Next Page"...

Installation

Props

Events

Slots