Atoms / Toggle

Toggle

<Toggle />Stable

A two-state button. Use for non-grouped on/off controls like bold, italic, mute. For mutually-exclusive choices, use Toggle Group; for form-binding state, use Switch or Checkbox.

import { Toggle } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Variant

Size

Pressed

State

Content

1<Toggle variant="plain" aria-label="Bold">
2  <Bold />
3</Toggle>

Variants

1<Toggle aria-label="Bold"><Bold /></Toggle>

Composition

1<Toggle defaultPressed>
2  <Italic /> Italic
3</Toggle>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.