Pagination
Pagination divides content into discrete pages, allowing users to navigate through large sets of information easily and maintain an organized viewing experience.
Last updated
Pagination divides content into discrete pages, allowing users to navigate through large sets of information easily and maintain an organized viewing experience.
Last updated
Use the Pagination component in interfaces where content is divided across multiple pages and users need to navigate through it sequentially. It’s ideal for content feeds, search results, product listings, and any scenario where users browse content across pages.
The Pagination component provides navigation options, typically displaying the current page, total pages, and navigation buttons like "Previous" and "Next." Users can click these buttons to move between pages. The component can be customized to show additional navigation controls, depending on the application’s requirements.
component_mode
An optional property that can be used to specify a mode for the pagination component, which may affect its behavior or styling depending on the use case.
string
current_page
The currently active page in the pagination. This defines the page that will be highlighted or considered as the "current" page.
number
custom_class
Custom CSS class(es) that can be applied to the pagination component for additional styling or customization.
string
total_pages
The total number of pages available for pagination. This determines how many pages are displayed in the pagination control.
number
type
The pagination style to be used. Different values adjust the layout and behavior of the pagination control.
'simple-slider': Displays a simple slider with previous and next buttons.
'buttons': Displays previous, next, and page buttons.
'text': Displays page numbers in a text format with previous and next buttons.
'text-pages': Displays page buttons with previous and next buttons in a text format.
'button-text': Displays previous and next buttons along with page buttons, in a button-text format.
'buttons-pages': Displays only the previous and next buttons.
'full': Displays all page buttons without previous/next buttons.
"button-text" | "buttons" | "buttons-pages" | "full" | "simple-slider" | "text" | "text-pages"
simple_slider_prev_button
Name attribute for the button with the type of simple_slider
string
simple_slider_next_button
Name attribute for the button with the type of simple_slider
string
buttons_prev_button
Name attribute for the button with the typeof buttons
string
buttons_next_button
Name attribute for the button with the type of buttons
string
text_prev_button
Name attribute for the button with the type of text
string
text_next_button
Name attribute for the button with the type of text
string
text_pages_prev_button
Name attribute for the button with the type of text_pages
string
text_pages_next_button
Name attribute for the button with the type of text_pages
string
button_text_prev_button
Name attribute for the button with the type of buttons_text
string
button_text_next_button
Name attribute for the button with the type of buttons_text
string
buttons_pages_prev_button
Name attribute for the button with the type of button_pages
string
buttons_pages_next_button
Name attribute for the button with the type of button_pages
string
Label: Displays the range of results currently being viewed and the total number of results available (e.g., "Showing 1 to 10 of 97 results"). This informs the user about the scope of displayed data.
Previous Icon: An arrow icon pointing left, used to navigate to the previous page of results. It is typically disabled on the first page.
Pagination Base: Includes all the clickable page numbers and possibly icons or ellipses indicating more pages. This area allows users to jump to specific pages directly.
Selected Pagination Base: Highlights the current page number within the pagination base, usually styled differently (e.g., a different color or bold) to indicate it is the active page.
Next Icon: An arrow icon pointing right, used to navigate to the next page of results. It becomes disabled when the user is on the last page.
Quick Select Button: A dropdown menu allowing the user to quickly select how many results to display per page (e.g., "10/page"). This provides control over the volume of data shown at one time.
Text Field: Accompanied by a "Go to Page" button, this field allows users to enter a page number and navigate directly to that page. It provides a faster way to jump to a specific page, especially useful in large datasets.
Use the Pagination component when you need to divide large amounts of content across multiple pages.
Avoid using pagination if content can be displayed on a single page without impacting performance or UX.
Ensure clear labeling for each button to make navigation intuitive.
Do not clutter the pagination controls with excessive styling; keep it simple and focused on navigation.
Provide a clear visual indication of the current page to help users understand their position.
Avoid using pagination if a continuous scroll would enhance user experience in a particular context.
Test the Pagination component for keyboard accessibility to ensure it is fully navigable.
Don't hide important information in pagination if users need easy access to all items within the dataset.
