Pagination Component

Pagination is used when having a long list that can be divided into several pages using pagination and only 1 page is loaded on that page. So-called list is too long.

Pagination Variations

Pagination Reguler
Pagination Color

Guideline

• Provide large clickable areas
• Don't use underlines
• Identify the current page
• Provide Previous and Next links
• When the number of pages exceeds the maximum display limit, ellipsis are used to truncate the remaining pages.

When to Use

• To clarify or give more contextual information about the item being displayed.
• To show information in a form of short and brief sentences.
• Provide context for unlabeled icon buttons.

When not to Use

• Not to display the same thing as the hovered item. For example, providing tooltip labelled “confirm” for an action button labelled “confirm”
• Long complex format information.
• Having action button or link.

Code