Skip to main content

Pagination

Pagination is a generic component to display content in paged format.

Variants​

There are 2 sizes pagination available in GEL: Default and SM.

Pagination types

Demo​

Pagination demo

Guidance​

  • Ideally pagination should be used in tables only regardless of whether the table is page level or spot level.
  • Pagination should be centrally aligned after the end of the last row of the table.
  • Since pagination is a form of navigation, wrapping this in a <nav> element with adding aria-label is strongly suggested for accessibility purpose.
  • Use the default pagination on page level tables while smaller tables (secondary tables) can use the smaller pagination.
  • Pagination can be omitted if the rows fit the viewport according to the use case.

When to use​

  • To break up a list or a large content block into multiple pages that can be navigated sequentially or by choosing a specific page within the set.

Designer assets​

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API​

vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP
Last updated on