HomeIndicator
A pill-shaped home gesture indicator that sits at the bottom of the screen on modern iPhone and iPad devices. It adapts its width for device type (iPhone, iPad) and orientation (Portrait, Landscape), and can be hidden entirely via the hasIndicator boolean.
Overview
A pill-shaped home gesture indicator that sits at the bottom of the screen on modern iPhone and iPad devices. It adapts its width for device type (iPhone, iPad) and orientation (Portrait, Landscape), and can be hidden entirely via the hasIndicator boolean.
The iphone variant.
Variants and states
| portrait | landscape | |
|---|---|---|
| iphone | ||
| ipad |
Anatomy
- 1container required Full-width frame with bottom padding (spacing.padding.md). Acts as the safe-area strip at the foot of the screen.
- 2indicator Rounded-pill rectangle (cornerRadius 100) in color.content.primary. Width and height are driven by device-mode Dimensions variables. Hidden when hasIndicator is false.
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
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.
Accessibility
Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.