Actions

Button.Icon

View in Figma

Icon-only button, the most compact form in the button family, with a square or circular container that shares the same variant and state matrix as Button.

Overview

Icon-only button, the most compact form in the button family, with a square or circular container that shares the same variant and state matrix as Button.

Variant
Primary

The primary variant.

Variants and states

defaultpresseddisabled
primary
secondary
tertiary
blurred

Anatomy

ButtonIcon
  1. 1IconWrapper  nested instance
  2. 2Icon  required

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.

Container
Container fill, primary default
colorBackgroundActionPrimaryDefault
#4B56C7
Container fill, primary pressed
colorBackgroundActionPrimaryPressed
#2E368A
Container fill, secondary default
colorBackgroundActionSecondaryDefault
#0000000A · 4%
Container fill, secondary pressed
colorBackgroundActionSecondaryPressed
#00000014 · 8%
Container fill, blurred default
colorBackgroundActionBlurDefault
#FFFFFF33 · 20%
Container fill, blurred pressed
colorBackgroundActionBlurPressed
#FFFFFF99 · 60%
Container border, blurred
colorBorderBlur
#FFFFFF33 · 20%
Border width, blurred
strokeXs
0.5pt
Corner radius, square md
radiusMd
12pt
Corner radius, square sm
radiusSm
8pt
Corner radius, circle
radiusPill
Pill
Inner padding, md
spacingGapPositiveXl
12pt
Inner padding, sm
spacingGapPositiveXs
4pt
Tertiary fill (default)
colorBackgroundActionTertiaryDefault
#FFFFFF00 · 0%
Tertiary fill (pressed)
colorBackgroundActionTertiaryPressed
#00000014 · 8%
Icon
Icon on primary and blurred
colorContentOnDark
#FFFFFF
Icon on secondary
colorContentAccent
#4B56C7
Tertiary icon color
colorContentAccent
#4B56C7

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
variantvariantprimary, secondary, tertiary, blurred
sizevariantmd, sm
statevariantdefault, pressed, disabled
shapevariantcircle, square

Accessibility

An icon-only button has no visible text, so it must carry an accessible label (accessibilityLabel on iOS, contentDescription on Android, aria-label on web) that names its action. Keep the tap target at least 44 by 44pt even when the glyph is smaller.

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