Skip to main content
The Toggle component provides a button that can be pressed/unpressed to toggle between two states.

​
Installation

import { Toggle } from "@craftdotui/baseui/components/toggle";

​
Usage

<Toggle>Toggle me</Toggle>

​
Props

​
pressed
boolean
Controlled pressed state.
​
defaultPressed
boolean
Default pressed state.
​
onPressedChange
function
Callback when state changes: (pressed: boolean) => void
​
variant
string
default:"default"
Visual variant.Options: default, outline
​
size
string
default:"md"
Size of the toggle.Options: sm, md, lg, icon
​
disabled
boolean
Disable the toggle.

​
Variants

  • default: Transparent border
  • outline: Visible border

​
Sizes

  • sm: h-8, text-sm
  • md: h-9 (default)
  • lg: h-10
  • icon: size-9 (square)

​
Examples

​
Basic Toggle

<Toggle>Bold</Toggle>

​
With Icons

import { Bold } from "lucide-react";

<Toggle size="icon">
  <Bold />
</Toggle>

​
Variants

<Toggle variant="default">Default</Toggle>
<Toggle variant="outline">Outline</Toggle>

​
Sizes

<Toggle size="sm">Small</Toggle>
<Toggle size="md">Medium</Toggle>
<Toggle size="lg">Large</Toggle>

​
Controlled

const [pressed, setPressed] = useState(false);

<Toggle pressed={pressed} onPressedChange={setPressed}>
  {pressed ? 'On' : 'Off'}
</Toggle>

​
Toggle Group (Text Formatting)

import { Bold, Italic, Underline } from "lucide-react";

<div className="flex gap-1">
  <Toggle size="icon"><Bold /></Toggle>
  <Toggle size="icon"><Italic /></Toggle>
  <Toggle size="icon"><Underline /></Toggle>
</div>

​
Accessibility

  • Built on @base-ui/react for ARIA support
  • Keyboard accessible
  • Proper aria-pressed state
  • Focus visible ring
  • Disabled state prevents interaction

Build docs developers (and LLMs) love

Get started for freeTalk to us