Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Pagination

The pagination component enables the user to select a specific page from a range of pages.

GitHubGitHub logocomponents/pagination
StorybookStorybook logocomponents/pagination
DesignUsageAccessibilityUpdates

Purpose

Navigate large datasets

Pagination breaks a long list of results into discrete pages, so users don't have to load or scroll through everything at once.

Show position in the set

The current page is always highlighted and the total page count is visible — users know exactly where they are in a long result set.

Control how much you see

When paired with a page-size selector, pagination lets users decide how densely they want to browse — fewer items for focus, more for efficiency.

Anatomy

1

Page controls

2

Current page

3

Next and previous actions

Configuration

Number

Pagination breaks large datasets into discrete pages and gives users clear controls for navigating between them.

Renders numbered page controls with previous and next buttons. Use at the bottom of a results list to let users navigate a large dataset without loading everything at once.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: gap-2-xs under sgds/pagination means sgds/pagination/gap-2-xs.

sgds/pagination
CategoryComponent tokenSemantic tokenValueGapgap-2-xssgds/gap/2-xs4pxBorderborder-radius-mdsgds/border-radius/md8pxTypographyfont-size-14sgds/font-size/14—Colourcolor-fixed-lightsgds/color-fixed-light#F3F3F3bg-transparentsgds/bg-transparentTransparentprimary-color-defaultsgds/primary/color/default—primary-surface-defaultsgds/primary/surface/default—primary-surface-translucentsgds/primary/surface/translucent—Sizedimension-40sgds/dimension/40—dimension-48sgds/dimension/4848pxOpacityopacity-50sgds/opacity/50—

Usage

When to use

  • Use pagination when showing everything on one page would hurt performance or make results difficult to scan.
  • Use it when users need a predictable way to move through related pages of results.

When not to use

  • Do not use pagination when there is only one page of content.
  • Do not use it for step-by-step journeys where users should move forward with a button and back link instead.

Best practices

Use pagination when the list is long enough

Pagination works best when it reduces load and helps users move through many related results.

Do not paginate short content

Extra page controls add work when the content could stay on a single page.

Accessibility considerations

Built-in accessibility

  • Pagination renders a navigation region and page controls with current-page state.
  • Page controls expose labels for their destination pages.

Labels and content

  • Use pagination when users need to move through a known set of pages.
  • Keep the current page state accurate when data changes.

Focus and interaction

  • Users should be able to tab through available page controls.
  • Disabled previous or next controls should not block users from reaching page numbers.

Keyboard interaction

KeyInteractionTabMoves focus from the page control to the next focusable element.Shift+TabMoves focus to the previous interactive element.EnterActivates the focused page control.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for paginationPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/pagination

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.