Warp Design System

Appearance

Page indicator - Overview ​

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

AndroidreleasedElementsreleasediOSreleasedReact 19released

General ​

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