Component

Toggle

A two-state button that can be either on or off.

variantdefault · outline

sizesm · default · lg · xl

disabledboolean

Playground

Variant— variant

Size— size

Disabled— disabled

size="sm" variant="outline"

italic and bold

icon + label

size="sm" · "default" · "lg" · "xl"

default and outline

defaultPressed — initial on state

Arabic

5 semantic tokens consumed by this component.

--mutedMuted

bg-mutedtext-mutedborder-muted

--foregroundForeground

text-foreground

--inputInput

bg-inputborder-input

--ringRing

ring-ringring

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive