Actions

ButtonGroup

View in Figma

A stacked or side-by-side arrangement of one primary button and up to two secondary buttons. The orientation prop switches between horizontal (equal-width columns) and vertical (full-width stacked) layouts.

Overview

A stacked or side-by-side arrangement of one primary button and up to two secondary buttons. The orientation prop switches between horizontal (equal-width columns) and vertical (full-width stacked) layouts.

Variant
Horizontal

The horizontal variant.

Variants and states

default
horizontal
vertical

Anatomy

ButtonGroup
  1. 1Button.Primary  required  instance swap
  2. 2Container.ButtonSecondary  optional
  3. 3Button.Secondary  instance swap
  4. 4Button.Tertiary  optional  instance swap

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.

Specs
Primary button fill
colorBackgroundActionPrimaryDefault
#4B56C7
Secondary and tertiary button fill
colorBackgroundActionSecondaryDefault
#0000000A · 4%
Primary button label and icon
colorContentOnDark
#FFFFFF
Secondary and tertiary button label and icon
colorContentAccent
#4B56C7
Corner radius on each button
radiusMd
12pt
Gap between buttons
spacingGapPositiveMd
8pt
Label typography on all buttons
body.md.semibold
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 600 · typographyFontWeightSemiboldTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText

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
orientationvarianthorizontal, vertical
hasButtonSecondarybooleanTrue
hasButtonTertiarybooleanFalse

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.