Toggle

uistable

Toggle — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/toggle

npm: class-variance-authority@^0.7.1, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

Variants

defaultoutline

Sizes

defaultsmlg

States

onoffdisabledfocus-visible

Keyboard

EnterSpace

Depends on

utils

Purpose

A two-state button that stays pressed/unpressed — e.g. a bold/italic formatting toggle. For several related toggles use toggle-group; for a settings on/off use switch; for a form boolean use checkbox.

Anatomy

A single Radix Toggle (a pressable button). Icon and/or text child.

Style

variant (default default): default (ghost-like) and outline.
size (default default): default, sm, lg.

Behavior & functionality

Controlled (pressed + onPressedChange) or uncontrolled (defaultPressed).

Accessibility

Exposes aria-pressed; toggles with Enter/Space; visible focus-visible; honors disabled.
Icon-only toggles need an aria-label.

Do / Don't

✅ Use in toolbars for reversible formatting states.
❌ Don't use for a form field boolean — use checkbox; for a setting — switch.