Page indicator - React 19

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

AndroidreleasedElementsreleasediOSreleasedReact 19released

React 19

AndroidElementsiOSReact 19

Import

You can import the component like so:

import { PageIndicator } from "@warp-ds/components/react/pageindicator";

Syntax

<PageIndicator pageCount={5} selectedPage={1} />

You can apply custom styling to align the component and add padding as needed:

<PageIndicator
  pageCount={5}
  selectedPage={1}
  style={{ paddingBottom: "12px", alignSelf: "end" }}
/>

Props

Required props

Name	Type	Default	Description
pageCount	number		The total number of pages.
selectedPage	number		Currently selected page.

Optional Props

Name	Type	Default	Description
style	CSSProperties		CSS styles to inline on the component container.

Questions?

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