GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Pagination
<gcds-pagination>

Also called: page index, page navigation. Pagination is a division of content into multiple linked pages.
  • GitHub
  • Figma

Pagination component preview

Review common uses for pagination to see if they match the problem you’re solving for.

Pagination use cases

Use pagination for very lengthy content on a single page that might be difficult to navigate, to reduce cognitive load, and to:
  • Display search results when there’s a long list of returns, reducing the time it takes to load and amount of scrolling.
  • Allow users to move through indexed content using next, previous, and page links.
  • Split into sections any long documents, like reports, that have chapters or other natural divisions.
  • Highlight the reader’s position in a sequence of content.
Stepper to track progress in a multi-step process. Links in the button component to navigate between non-sequential pages or to external sites.

Choose a pagination display

Simple

Use simple pagination when the number of pages is small (2 to 5 pages).

List

Use list-styled pagination when:
  • The number of pages is large.
  • The “Previous” and “Next” links would make navigation cumbersome.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2026-06-12