For Designer

Components/Inputs

Switch

Switches turn a single setting on or off, and the change takes effect the moment people flip it

Variants
16
Component sets
2

Playground

Playground

Pick a variant, then click the preview to flip it

20

Switch-label · Position=Right · Select=true · Disable=false

Pastes into Figma as editable auto layout layers with Unictive values, click the button or press ⌘C to copy

Sizes

Sizes

Medium for settings pages and forms, Small for dense lists and table rows

States

States

On fills the track with brand blue and slides the knob right. Disabled keeps the knob position and greys it out

With label

With label

Switch-label adds a label, an optional description, badge and link button. Position sets which side the switch sits on

Usage

When to use

Use when

  1. A setting turns on or off and applies right away, with no Save button
  2. The two states are clear opposites, like on and off or show and hide
  3. People scan a list of settings and flip the ones they need

Avoid when

  1. The change only applies after people submit a form, use a Checkbox
  2. People pick one of several options, use a Radio Group
  3. The action can’t be undone or needs a confirmation, use a Button

Guidance

Do and don’t

Order notifications
Do

Name the setting in the label and let the switch show its state

Subscribe to newsletterSave changes
Don’t

Don’t use a switch when the change waits for a Save button, use a Checkbox

Specs

Tokens and specs

PropertyTokenValue
Track size—36 × 20 / 28 × 16
Track padding2 px
Knob size—16 / 12 px
Corner radius999 px
Track, off#EBEBEB
Track, on#1868D0
Knob#FFFFFF
Disabled knob#D1D1D1
Knob motion—160 ms, cubic-bezier(.2, 0, 0, 1)
Label width—360 px
Control to text12 px
Label styleInter Medium 14/20
Description styleInter Regular 12/16
Link button styleInter Medium 12/16
Esc