Skip to content

pagination Pagination

Pagination

Usage

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Style

Default

Usage: This is the default pagination that usualy used in entire design layout. This type of pagination used when the amount of page is limited (ex : up to 10).

Truncate

Usage: This type of pagination usualy used when the page has a large amout or exceeds the maximum display limit (ex : more than 10). Ellipsis is used to truncate the remaining pages.
Usage: This type of pagination that have double truncation usualy used when the current page is separated by more than five pages from both the first and last page.

Short

Usage: This type of pagination usualy used when the page has a large amout or exceeds the maximum display limit (ex : more than 10). Ellipsis is used to truncate the remaining pages.

None

Usage: This type of pagination usualy used when the page has a large amout or exceeds the maximum display limit (ex : more than 10). Ellipsis is used to truncate the remaining pages.

Far

Usage: This type of pagination that have a navigation also button shortcut to jump to the first page or last page. Usage: Use this type of pagination to jump to the next or previous page. This pagination used to simplify the function for move to another page, usually used when amount of page is limited. Usage: Use this type of pagination to jump to the next or previous page. This navigation used when the user can’t understand the meaning of next or previous button. So instead using icon to navigate next and previous page, use button text ‘previous’ and ‘next’. Usage: Use this type of navigation to jump to the next or previous page, also can jump to the first and last page.

Jump to page

Usage: This component used when the page number is too much (ex : more than 100), so to shorten the process, this pagination will be used because can search to specific page.

Detail

With Detail

Usage: The pagination with detail usualy used for the page has a large amout. so the user can set by themself how many pages they liked to shown.

Without Detail

Usage: This is the basic default pagination component that usualy used in all over designs. This type of pagination usualy used when the page doesn’t have large amount content to shown, and have a limited amount of page.

Pattern Rule

Best Practice

For smaller screens, it's best to show a maximum of seven pages (including the ellipsis)

For larger screens, show a maximum of 14 pages (including the ellipsis).

On all platforms, pagination should

  • Only be used for lists with more than 25 items

Web pagination should

  • Be placed at the bottom of a long list that has been split up into pages
  • Pagination should navigate to the previous and next set of items in the paged list
  • Hint when merchants are at the first or the last page by disabling the corresponding button

Do

  • Use Pagination to let users page through items where a user is trying to find a specific item.
  • Add custom, context-specific information to page labels and left and right page controls to give customers more clarity about where they are and where they’re going, when needed.
  • Show current page count whenever possible so users understand where they are in a dataset, and so that they know the content in view has been updated if they navigate to a new page number.

Don’t

  • Don’t use the Pagination component to help users navigate through linear multi-step content like paged forms. In these cases, use a Progress Stepper (coming soon) or something that can communicate more about a user’s status through a flow than the Pagination component allows.
  • Don’t over-complicate Pagination labels with too much information about the content in view. If you can’t give succinct labels to Pagination, consider showing the information elsewhere on the page.

Released under the MIT License.