Skip to main content


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


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

Pagination types


Pagination demo


  • 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

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

Developer API

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