Pagination

A pagination component is a navigational element used to split a large collection of content — such as search results or products — into separate pages. It allows users to browse the content in manageable chunks without having to load everything at once.

When to use

Large data sets

Use in ordered dataset like a table of users, a list of transactions, or a product catalog.

Large data sets

Use in ordered dataset like a table of users, a list of transactions, or a product catalog.

Search results

Sometimes, it's essential for organizing search results into browsable pages.

Search results

Sometimes, it's essential for organizing search results into browsable pages.

Content archives

Helpful for browsing blog posts, articles, or any collection of content that grows over time.

Content archives

Helpful for browsing blog posts, articles, or any collection of content that grows over time.

When to avoid

Small data sets

If the total number of items can be comfortably displayed on a single page without performance issues, pagination is unnecessary.

Small data sets

If the total number of items can be comfortably displayed on a single page without performance issues, pagination is unnecessary.

Indefinite feeds

For content where continuous discovery is key (like a social media feed), an "infinite scroll" or a "Load more" indicator is a better user experience.

Indefinite feeds

For content where continuous discovery is key (like a social media feed), an "infinite scroll" or a "Load more" indicator is a better user experience.

Sequential content

Avoid paginating a single, continuous piece of content like an article or a legal document, as it disrupts the reading flow.

Sequential content

Avoid paginating a single, continuous piece of content like an article or a legal document, as it disrupts the reading flow.

Specifications

Behavior

First / Last buttons

An optional boolean (True / False) property. Jumps the user directly to the first or last page in a larger pagination set.

Truncation

When the total number of pages exceeds the visible number of items, an ellipsis (...) is used to indicate a gap in the page sequence. This ensures a more compact component.

Anatomy