Back to BSpace
ComponentsPaginationPagination in interface design refers to the organization and presentation of content across multiple pages, particularly in situations where the amount of content exceeds the space available on a single page.
Guidelines
Design
Updated
Vue
Updated
Flutter
Updated

Anatomy

Desktop
Displays the current page and the total number of pages. Provides clarity on the user’s current position in the dataset.
 Allows users to specify the number of items displayed per page (e.g., 5, 10, 25, 50, 100 data).
 Navigates to the next or previous page. Displays specific page numbers that the user can click to navigate directly to a specific page.
Mobile
Displays the current page and the total number of pages. Provides clarity on the user’s current position in the dataset.
 Allows users to specify the number of items displayed per page (e.g., 5, 10, 25, 50, 100 data).
 Navigates to the next or previous page.
Type of Display Pagination
Display + Pagination Number
This setup is typically used when the total number of pages is manageable enough to display a sequence of page numbers directly. Users can click on a specific page number to navigate to that page. It is ideal for applications with a moderate amount of data where showing the exact page numbers (e.g., 1, 2, 3, ...) improves user experience.
Display + Pagination Step
This format is used when the dataset is extensive, making it impractical to display all page numbers. Instead, navigation controls (like "Next," "Previous," or steps) allow users to move through the pages incrementally. Suitable for very large datasets (e.g., thousands of records).
Variant of Pagination
Primary (Default)

This variant is ideal for scenarios where pagination is a key part of the user's navigation flow, such as switching pages in a table or on a list view where data visibility is critical.

Secondary

This variant is intended for secondary or less prominent areas. It works well in contexts where the pagination is not the focal point, such as within a sidebar or a supporting section.

Size of Pagination
Large (Default)

Larger dimensions for buttons and spacing. Ideal for primary sections where pagination is frequently used and requires easy accessibility. For example, in a main table of a dashboard where users navigate through detailed records or datasets, the large size ensures better usability and visibility.

Small

Compact dimensions for buttons and spacing. Suitable for areas with limited space or less frequent use. For instance, inside cards, small panels, or compact sections, where pagination supports content navigation without taking up significant space or overshadowing other elements.

State of Pagination Button
Default
Default condition when the button can be clicked
Active/Pressed
Refers to the visual appearance that indicates the active or selected page or item in the pagination system. In other words, "active variant" in pagination is a way to highlight or clearly mark the active page or item so that users can easily identify it during page navigation.
Hover
Refers to the behavior when users hover their mouse cursor over or move it above a page or item in the pagination list. This is often used to provide visual feedback to users.
Disable
Refers to the state where certain page numbers or navigation controls are inactive or not clickable. This state is typically used when certain pages are not available or relevant based on the current context.


Usage

The Pagination component is used to navigate through a list or dataset that spans multiple pages. It is particularly useful when displaying a large amount of data that cannot fit on a single screen.

Usage Recommendation:

  • To allow users to concentrate on a limited number of items simultaneously.
  • For displaying the entire range of pages available for user navigation.
  • To enable users to swiftly and effortlessly navigate to any page within the list.


Accessibility

First and Last Page

Ensure the "Previous" and "Next" buttons are disabled when the user is on the first or last page, respectively.

Do's
Don't
Center Alignment of Active Page

Ensure the active page button is always centered within the pagination component, except when the user is on the first two or last two pages.

Do's
Don't


Content

Screen Readers

Provide clear announcements for actions, e.g., "Showing 30 to 40 of 100 entries" or "Page 3 of 20"