Overview

The Pagination component is a crucial element for navigation through lists or collections of items, such as Campaigns, Templates, Journeys, and Snippets within Iterable. It enhances the user experience by displaying a limited number of items per page, enabling marketers to easily navigate through large datasets without overwhelming load times or clutter.

Design

The pagination is a collection of Secondary and Tertiary (ghost) buttons and the states and styles should be inherited from those components.

 

Structure

• Previous and Next buttons: Used for navigating between pages. When on the first page, the left arrow is not visible.
• Page numbers (extended only): Displayed in the middle, allowing direct navigation to a specific page.
• Ellipses (extended only): Used to indicate a break in the sequence for long lists, showing only the first, last, and neighboring pages (before and after) If there are are multiple to the current page.

Variants

• Simple Pagination: Includes only 'Previous' and 'Next' buttons for shorter lists.
• Extended Pagination: Incorporates page numbers alongside 'Previous' and 'Next' buttons for navigating through larger datasets.

 

Results per page

Results per page is another part of the pagination component that impacts the number of pages. Based on the marketer’s selection, it determines how many of a particular resource are shown in a table at one time.

A smaller result count may lead to a larger page count and vice versa.These are generally reserved for index footers only.

 

 

Guidelines

Use cases

• Index Pages: Use on any page that lists items (e.g., Campaigns, Templates) to manage the analysis and visibility of extensive data.

 

No arrows on page bookends

When on the first page or last page, no back arrow should be visible. Visible page count should show the first, last, and neighboring pages (before and after) of the current page. The arrows take the marketer to the previous or next pages.

 

 

Accessibility

• Ensure that the pagination component is keyboard navigable, allowing marketers to use arrow keys for navigation.
• Use aria-current="page" to indicate the current page and aria-label attributes on buttons to provide context (e.g., aria-label="Go to next page").

Health