Pagination

Introduction

The Pagination component allows users to view the active page and navigate through multiple pages of content. The active page is visually highlighted using a neutral dark color for clear emphasis.

Interactive demo

Try the interactive demo below to explore different pagination configurations.

Best practices

• Position: Position pagination at the center bottom of the content. Often used at the bottom of a table.
• In Modal/Drawer: If you want to use pagination within modals or drawers, use the mobile variant.

Mobile

The mobile variant is optimized for screen widths between 360px and 959px. It features static page numbers paired with navigation arrows, creating a compact and intuitive experience for smaller screens. To view the mobile variant, go to the interactive demo and resize your browser window to a smaller width.

Pagination in components

Pagination can be used within various components. See the links below for more information: