Pagination

Lets users navigate through a list of pages and indicate the current page.

Base Components

Overview

Pagination divides content into separate pages, allowing users to navigate through large sets of data.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D124-40955%26t%3DpA8X0YmO6d7F2SMU-‍

When Should You Use Pagination?

  • Large Datasets: When displaying a long list of items, such as search results, product catalogs, or database entries.
  • Improving Performance: To reduce load times and improve performance by loading only a subset of data at a time.
  • Enhancing Usability: To provide a structured and organized way for users to navigate through content.

How Should You Use Pagination?

  • Include the Pagination component in your project by importing it from the design system library.
  • Ensure that your data is appropriately structured to support pagination, typically as an array or a paginated API response.
  • Define the structure of your Pagination with a container element.
  • Add individual page links, as well as "Previous" and "Next" buttons.
  • Add features like "First" and "Last" buttons for quicker navigation.
  • Display the total number of pages or items to provide context to the user.
  • Implement dynamic pagination for server-side data fetching to handle large datasets more efficiently.

Previous

No previous post
Up next

No next post