Feedback

PageControl

View in Figma

A row of dots that marks the current position in a paged or carousel view, with the active page shown as a darker dot.

Overview

A row of dots that marks the current position in a paged or carousel view, with the active page shown as a darker dot.

Anatomy

PageControl
  1. 1Root  Slot holding the run of dots
  2. 2dot  Instance of BuildingBlock / PageControl.Dot, repeated once per page; the active one uses the darker fill

Measurements

Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Dot
Active dot fill
colorContentSecondary
#6D747E
Inactive dot fill — same color as active, dimmed to 0.32 opacity
colorContentSecondary
#6D747E
Dot radius (full circle)
radiusPill
Pill
Container
Gap between dots
spacingGapPositiveMd
8pt

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
Rootslot3 PageControl.Dot instances

Accessibility

Expose the current page and the total to assistive technology (for example "Page 1 of 4"). The dots are decorative on their own, so the position must also be conveyed as text or an accessibility value.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.