Button.Pill
Compact fully rounded action button with an optional leading and trailing icon around a required label. Shares the variant and state matrix of Button (primary, secondary, blurred across default, pressed, disabled) but uses the sm size at 28pt height and the pill radius for inline actions where vertical space is tight.
Overview
Compact fully rounded action button with an optional leading and trailing icon around a required label. Shares the variant and state matrix of Button (primary, secondary, blurred across default, pressed, disabled) but uses the sm size at 28pt height and the pill radius for inline actions where vertical space is tight.
The primary variant.
Variants and states
| default | pressed | disabled | |
|---|---|---|---|
| primary | |||
| secondary | |||
| tertiary | |||
| blurred |
Anatomy
- 1IconLeading optional nested instance, 12pt
- 2Container.Label
- 3Label required
- 4IconTrailing optional nested instance, 12pt
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
The pill is shorter than a standard button, so keep the tap target at least 44pt tall by adding vertical padding around it. Use concise, action-led labels, and do not rely on the disabled opacity alone to convey state.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.