Page indicator - Frameworks
A page indicator shows the total amount of pages (or images) and the current page using dots.
AndroidreleasedElementsreleasediOSreleasedReact 19released
React 19
Import
You can import the component like so:
js
import { PageIndicator } from "@warp-ds/components/react/pageindicator";Syntax
js
<PageIndicator pageCount={5} selectedPage={1} />You can apply custom styling to align the component and add padding as needed:
js
<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