States
Slot has no visual states — it is transparent. The four layout modes (width × height) are its functional configurations. All demos show Slot with a dashed border to make the invisible boundary visible.
width: hug · height: hug (default)
slot
Component
width: fill · height: hug
slot
Component
width: hug · height: fill
slot
Component
width: fill · height: fill
slot
Component
Mode tokens
| Dimension | Mode | CSS | Default |
|---|---|---|---|
| Width | hug | width: fit-content | Yes |
| Width | fill | flex: 1 1 0; min-width: 0 | — |
| Height | hug | height: fit-content | Yes |
| Height | fill | align-self: stretch | — |
Slot has no background, border, or shadow tokens — it is visually transparent in all modes.
Anatomy
Slot contains exactly one child. Only vertical padding is allowed — no horizontal padding, no visual decoration.
┌─ Slot ──────────────────────────────────┐
│ ▲ padding-top (SP token, default s0) │
│ │
│ ┌─ content ──────────────────────┐ │
│ │ [any DS component] │ │
│ └────────────────────────────────┘ │
│ │
│ ▼ padding-bottom (SP token, default s0)│
└─────────────────────────────────────────┘
| Element | Required | Description |
|---|---|---|
| content | Required | The single child. Any DS component. Slot is not a Row or Column — it holds exactly one child. |
| padding-top | Optional | Inner top padding. SP token only, default --sp-s0. |
| padding-bottom | Optional | Inner bottom padding. SP token only, default --sp-s0. |
Hard constraints:
No horizontal padding · No background · No border · No shadow · No role · No aria · Exactly one child
Layout
Four properties control Slot's layout behavior. Width and height each have two binary modes. Alignment only has effect when the respective dimension is
fill.Width
| Value | Behavior | CSS | Figma |
|---|---|---|---|
| hug · default | Width shrinks to content | width: fit-content | Width: Hug |
| fill | Width expands to fill the parent | flex: 1 1 0 | Width: Fill |
Height
| Value | Behavior | CSS | Figma |
|---|---|---|---|
| hug · default | Height shrinks to content + padding | height: fit-content | Height: Hug |
| fill | Height expands to fill the parent | align-self: stretch | Height: Fill |
Align Horizontal
| Value | Behavior | CSS justify-content |
|---|---|---|
| start · default | Content aligned to the left edge | flex-start |
| center | Content centered horizontally | center |
| end | Content aligned to the right edge | flex-end |
| stretch | Content stretched to full width | stretch |
Align Vertical
| Value | Behavior | CSS align-items |
|---|---|---|
| top · default | Content aligned to the top edge | flex-start |
| center | Content centered vertically | center |
| bottom | Content aligned to the bottom edge | flex-end |
| stretch | Content stretched to full height | stretch |
Padding (vertical only)
| Property | Allowed values | Default |
|---|---|---|
| padding-top | SP tokens: s0 s2 s4 s6 s8 s12 s16 s20 s24 s32 s40 s48 s56 s64 s80 s96 | --sp-s0 |
| padding-bottom | same SP tokens | --sp-s0 |
Layout examples — common combinations
fill × hug · align-h: center
slot
Component
Centered block at full column width
fill × hug · align-h: stretch
slot
Component
Full-width button or row
fill × fill · align: center / center
slot
Component
Full-screen centered overlay
hug × hug · padding-top: s16
slot
Component
Top spacing via padding instead of outer gap
Animation
Slot has no animations or transitions of its own. If Slot wraps an animated component, the animation belongs to the nested component — not to Slot.
| Element | Property | Animation |
|---|---|---|
| Slot | all | None — Slot does not animate |
| Nested component | any | Governed by the nested component's own motion tokens |
@media (prefers-reduced-motion: reduce) {
/* Slot has no animation — intentionally empty */
}
Slot does not respond to press, hover, or focus — no state transitions exist.
For entrance or exit animations on a Slot-wrapped component, apply the DS motion tokens to the nested element, not to
.slot.
Usage
Use Slot when you need to change the layout behavior of a component without modifying the component itself.
When to use
- Wrap a component to change its
widthorheightbehavior (hug ↔ fill) - Add vertical spacing between components via
padding-toporpadding-bottom - Center or align a component inside a parent container
- Inside Cell, Card, Bottom Sheet — to position nested elements within a slot zone
When not to use
- When horizontal padding is needed — use the component's own padding or the parent layout instead
- When placing multiple components side by side — Slot is single-child only; use a Row/Stack layout
- When a visible container is needed (background, border, shadow) — use Card or Surface
- As a substitute for component-level padding — prefer padding inside the component itself when possible
Related components
| Component | Relationship |
|---|---|
| Cell | Slot is used for the leading and trailing slots of the cell to control their size behavior |
| Card | Slot wraps the card content, controlling vertical padding |
| Bottom Sheet | height: fill via Slot stretches the content zone to fill the sheet |
| Button | width: fill via Slot makes the button full-width without modifying the button itself |
Accessibility
Slot is semantically transparent. It renders as a plain
<div> with no role, no ARIA attributes, and no focus behavior. All accessibility responsibility belongs to the nested component.Roles and ARIA
| Element | Role | ARIA | Notes |
|---|---|---|---|
Slot (.slot) | none | none | Plain <div>. Never add role, aria-label, or any aria-* |
| Nested component | own role | own aria | Fully responsible for its own semantics and focus |
Keyboard navigation
| Behavior | Notes |
|---|---|
| Slot is not in the tab order | No tabindex. Focus skips directly to the nested component if it is focusable |
| No focus indicator | Slot never receives focus — no outline needed |
| No contrast requirement | Slot is invisible — no background or border to measure |
Full accessibility spec:
specs/primitives/slot-a11y.md