Actions

ButtonDock

View in Figma

A fixed bottom-of-screen action tray that stacks a primary button above a pair of secondary buttons, with an optional top-content slot and a home-indicator bar. The two boolean axes control whether the top-content slot region and the home-indicator are rendered.

Overview

A fixed bottom-of-screen action tray that stacks a primary button above a pair of secondary buttons, with an optional top-content slot and a home-indicator bar. The two boolean axes control whether the top-content slot region and the home-indicator are rendered.

SlotContent

Anatomy

ButtonDock
SlotContent
  1. 1Container.TopContent  optional
  2. 2[Slot:Content]  optional  instance swap
  3. 3Container.Button  required
  4. 4Button.Primary  required  instance swap
  5. 5Container.ButtonSecondary
  6. 6Button.Secondary  instance swap
  7. 7Button.Tertiary  instance swap
  8. 8HomeIndicator  optional  instance swap

Measurements

SlotContent
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.

Color
Dock surface background gradient
colorBackgroundElevatedPrimary
#FFFFFF
Button.Primary fill
colorBackgroundActionPrimaryDefault
#4B56C7
Button.Primary label and icon
colorContentOnDark
#FFFFFF
Button.Secondary and Button.Tertiary fill
colorBackgroundActionSecondaryDefault
#0000000A · 4%
Button.Secondary and Button.Tertiary label and icon
colorContentAccent
#4B56C7
HomeIndicator pill fill
colorContentPrimary
#0C1828
Slot:Content border stroke
colorBorderFocused
#4B56C7
Radius
Button corner radius
radiusMd
12pt
Spacing
Horizontal padding, Container.TopContent
spacingPaddingXl
16pt
Top padding, dock root
spacingPaddingSm
4pt
Bottom padding, dock root and Container.Button
spacingPaddingMd
8pt
Horizontal padding inside each button
spacingPadding2xl
24pt
Vertical padding inside each button
spacingPaddingLg
12pt
Gap between Button.Primary and Container.ButtonSecondary
spacingGapPositiveMd
8pt
Gap between icon and label inside each button
spacingGapPositiveXs
4pt
Typography
Button label typography
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
Container.TopContentslotSlot
hasTopContentbooleanTrue
hasHomeIndicatorbooleanTrue

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.