Warp Design System

Appearance

Page indicator ​

A page indicator shows the total amount of pages (or images) and the current page using dots.

React 19betaiOSreleased

Page indicators help users understand that there are more images, or pages, available to scroll through, that are currently hidden from view.

Example ​

Anatomy ​

Anatomy of a page indicator component with four circular dots in a horizontal row. The first dot is filled in blue, indicating the active page. The remaining three dots are light gray, indicating inactive pages. Two numbered callouts are present: (1) points to the active page indicator, and (2) highlights one of the inactive indicators.

  1. Active dot
  2. Inactive dot

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system