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"
Icon: Positioned on either side of the navigation controls (e.g., "Prev" and "Next"), the icon provides a directional cue for moving between pages, using left and right arrows.
Label: Used to indicate previous or next steps, this text label enhances clarity, allowing users to intuitively navigate between pages.
Page Indicator: Displays the current page range (e.g., "Page 1 to 8"), offering users context on their position within the sequence of pages and total pages available.
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.
