← Back to Index

Toggle Switch Figma: Toggle - Switch scaffold/atom

Updated: 2026-07-06 17:22 ET

Audited: 2026-07-06 17:22 ET

Bare on/off switch — the smallest reusable interactive toggle control, no children beyond its knob.
Figma: Components section, node 4128:7733 · live file owEYzHf7FrHRvWC2u82UOl ("ALPA mobile app") · captured 2026-07-06 · decision D47
New scaffold/atom, distinct from toggle-settings. A gap audit flagged this live-file node (4128:7733) as separate from the already-catalogued toggle-settings primitive (node 4875:11208, code name ToggleSettings). Direct structural comparison confirms toggle-settings composes this atom: each of its two states contains a Toggle - Switch instance (64×28, identical Frame+Knob structure to this master's On state) alongside a sibling label text node. This page specs the bare switch atom only — see design-tokens.html for the cross-reference table.

Live CSS Preview

State = Off (64×28)
State = On (64×28)

States

StateDimensionsFillStructure
Off64 × 28#d2d4d6 (track)Frame (21×10, AX label as an ELLIPSE) + Knob (39×24, fill #ffffff)
On64 × 28#007bc2 (track)Frame (21×10, AX label as a RECTANGLE) + Knob (39×24, fill #ffffff)

Component_set overall bounding box is 104×120 (both states stacked in the Figma canvas) — each individual state is 64×28, the actual rendered control size. The "AX Label" child differs in shape (ellipse vs rectangle) between states — likely a Figma accessibility/labelling artifact rather than a rendered visual element; not carried into the CSS preview above.

Design Tokens

Track

Off fill
#d2d4d6
On fill
#007bc2 (Interactive/Blue-lt, existing token)
Track radius
14px (pill / BorderRadius/Full)

Knob

Fill
#ffffff
Size
39 × 24 px (Figma) — rendered ~24×24 circle in CSS preview

No new design tokens introduced — both fills (#d2d4d6, #007bc2) already exist in design-tokens.html's palette.

Layer Tree

└── Toggle - Switch · COMPONENT_SET · 2 states (Off / On)
    ├── State=Off · 64×28 · fill #d2d4d6
    │    ├── Frame · 21×10 · AX Label (ELLIPSE)
    │    └── Knob · 39×24 · fill #ffffff
    └── State=On · 64×28 · fill #007bc2
        ├── Frame · 21×10 · AX Label (RECTANGLE)
        └── Knob · 39×24 · fill #ffffff

ViewModel

New scaffold/atom ViewModel. Spec-only; not yet in ComponentViewModels.cs.

└── ToggleSwitchViewModel : ComponentViewModel
    ├── IsOn : bool — Off/On state
    └── ToggleCommand : ICommand — flips IsOn on tap

Composition Note — toggle-settings

The existing design-tokens.html / D23 entry toggle-settings (node 4875:11208, code name ToggleSettings) composes this atom: its Property 1=Default state (299×28) pairs a "Lorem ipsum dolor sit amet" label with a 64×28 Toggle - Switch instance; its Property 1=Variant2 state (244×44) stacks the same instance with a wrapping label below. ToggleSettings' own node-id gap (still null in the screen-mapping.html node registry) is not resolved by this page — that remains open, tracked separately from this atom's own capture.

Developer Notes