Skip to content
DOL Studio

Switch

Design: Stable Code: Coded toggleinstant-apply 3 Figma sets 5 standalone Switch/Text and Icon

Live preview

Switch · variant matrix

4 rows (colors × sizes) × 4 states. Rows auto-derived from `SWITCH_COLORS × SWITCH_SIZES` runtime arrays — add a color/size to `@dol/ui/switch` to auto-surface here.
OffOnOff (disabled)On (disabled)
Primary · sm
Primary · md
Tertiary · sm
Tertiary · md

Interactive

→ Notifications: on

Import & files

Import
import { Switch } from "@dol/ui/switch";
Source file
packages/@dol/ui/src/switch/Switch.tsx

Figma source

Figma source 3 sets
Page
Switch
Sets
3 + 5 standalone
Primary set
Switch/Text and Icon · 36 variants Open in Figma →
Showing: Switch/Text and Icon
2 other sets

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Switch
Slug: `switch`
Domain: general · Category: actions
Design: stable · Code: coded


## Description
Binary on/off control - 3 sets across Layout group / large active / large inactive masters.


## Import
```ts
import { Switch } from "@dol/ui/switch";
```
Source: `packages/@dol/ui/src/switch/Switch.tsx`


## Figma source
Page: Switch
Sets: 3
Primary: Switch/Text and Icon
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=3404-22796

Related

  • Button

    Coded

  • IconButton

    Coded
  • Day
    Week
    Month

    SegmentedControl

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).