Utility

Slot

View in Figma

A named placeholder that marks where a real subcomponent should be swapped in. It has no configurable variant axes and carries an instructional label, a safety-zone dashed border, and a low-opacity tinted background so slots are visually distinct from live content during composition.

Overview

A named placeholder that marks where a real subcomponent should be swapped in. It has no configurable variant axes and carries an instructional label, a safety-zone dashed border, and a low-opacity tinted background so slots are visually distinct from live content during composition.

slotReplace this subcomponent in the variant properties with one you've built locally.
SlotContent

Anatomy

Slot
slotReplace this subcomponent in the variant properties with one you've built locally.
SlotContent
  1. 1Container  required  Outer frame with radius.sm corner radius, spacing.padding.xl inset on all sides, and a color.background.action.secondary.default fill at 4% opacity.
  2. 2Container.Content  required  Vertical auto-layout frame that holds the icon glyph and label text. Gap is spacing.gap.positive.md.
  3. 3Icon  required  SF symbol glyph at 32pt semibold, colored color.content.accent. Replaced when the slot is swapped.
  4. 4Label.Title  required  12pt semibold label in color.content.accent identifying the slot by name.
  5. 5Label.Description  10pt regular instructional text in color.content.accent describing the expected subcomponent.
  6. 6Safety-zone  required  Dashed border rectangle (12px dash, 8px gap, 1pt weight) stroked in color.border.focused, marking the safe swap boundary.
  7. 7Safety pattern  optional  Decorative image overlay at 60% opacity. Visual aid only; not rendered at runtime.

Measurements

slotReplace this subcomponent in the variant properties with one you've built locally.
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.

Shape
Container corner radius
radiusSm
8pt
Layout
Container inset padding (all sides)
spacingPaddingXl
16pt
Container.Content vertical gap
spacingGapPositiveMd
8pt
Color
Container and Safety-zone fill (at 4% opacity)
colorBackgroundActionSecondaryDefault
#0000000A · 4%
Safety-zone dashed stroke
colorBorderFocused
#4B56C7
Icon glyph, Label.Title, and Label.Description text
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

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.