Brand Guidelines

Toggles & Switches

Toggle and switch components for on/off states

Toggle

Default

Disabled

Checked

Enabled

Disabled

Switch

Default

Off

With Label

Enable notifications

Code

<button
  className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors bg-primary"
>
  <span className="inline-block h-4 w-4 transform rounded-full bg-card translate-x-6" />
</button>