Page indicator - Elements

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

AndroidreleasedElementsreleasediOSreleasedReact 19released

AndroidElementsiOSReact 19

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Accessibility

Usage

<w-page-indicator page-count="5" selected-page="1"></w-page-indicator>

Examples

<w-page-indicator selected-page="3" page-count="5"></w-page-indicator>

Styling API

<w-page-indicator> API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties

Name	Type	Default	Summary
ariaLabel (JS only)	unknown	groupLabel	-
page-count	number	1	Total number of pages
role (JS only)	string	"img"	-
selected-page	number	1	Currently selected page (1-based index)

Property Details

ariaLabel (JS only)

• Type: unknown
• Default: groupLabel

page-count

Total number of pages

• Type: number
• Default: 1

role (JS only)

• Type: string
• Default: "img"

selected-page

Currently selected page (1-based index)

• Type: number
• Default: 1

Questions?

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