Toggle

Ready

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

Interactive Preview

Click the toggle buttons to see them in action

Variants

Toggle comes in two visual variants

Default

Outline

Sizes

Three size options: small, medium, and large

With Text

Toggle can include text labels

Controlled State

Control the toggle state externally

Bold: Off | Italic: Off

Disabled State

Toggle can be disabled

Usage

How to use the Toggle component

// Basic usage
<Toggle>
<Bold className="h-4 w-4" />
</Toggle>
// Controlled state
<Toggle
pressed={bold}
onPressedChange={setBold}
>
Bold
</Toggle>

API Reference

Props

variant-"default" | "outline"
size-"sm" | "md" | "lg"
pressed-boolean (controlled)
defaultPressed-boolean (uncontrolled)
onPressedChange-(pressed: boolean) => void
disabled-boolean