Skip to main content

BriteSwitch

Sharedcomponent✓ stamped

Toggle switch and labeled switch field.

@brite-nites/design-system/primitives/brite-switch

Radix Switch with brand-primary on-state and neutral-off state. Three sizes: sm (16 tall), md (20 tall, default), and lg (24 tall — on the 8px grid + the 24px touch floor). Focus uses the system focus ring. For settings rows, use BriteSwitchField to pair a switch with a label + description.

Sizes

sm, md, lg. Default is md.

sm (16 tall)
md (20 tall) — default
lg (24 tall)

States

On / off / disabled.

off
on
disabled, off
disabled, on

Settings field — BriteSwitchField

Label + optional description, with the switch right-aligned. Clicking the label toggles the switch.

Inline

Tight layout with no description — left or right label.