Toggle

Forms

Actions

A two-state button that can be either on or off. Ideal for toolbar actions and binary options.

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

Props

Toggle component API reference

Prop	Type	Default	Description
`variant`	`'default' \| 'outline'`	`'default'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Toggle size
`pressed`	`boolean`	—	Controlled pressed state
`defaultPressed`	`boolean`	`false`	Default pressed state (uncontrolled)
`onPressedChange`	`(pressed: boolean) => void`	—	Callback when state changes
`disabled`	`boolean`	`false`	Disable the toggle
`children`	`ReactNode`	—	Toggle content (icon and/or text)

Usage

Import and implementation example

import { Toggle } from '@/components/ui/toggle'
import { Bold, Italic } from 'lucide-react'

export default function Example() {
  const [bold, setBold] = useState(false)

  return (
    <>
      {/* Basic usage */}
      <Toggle>
        <Bold className="h-4 w-4" />
      </Toggle>

      {/* With text */}
      <Toggle>
        <Bold className="h-4 w-4 mr-2" />
        Bold
      </Toggle>

      {/* Controlled state */}
      <Toggle pressed={bold} onPressedChange={setBold}>
        Bold
      </Toggle>

      {/* Default pressed */}
      <Toggle defaultPressed>
        <Italic className="h-4 w-4" />
      </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>
    </>
  )
}

Features

Built-in functionality

Two variants: Default and outline styles
Three sizes: Small, medium, and large
Controlled & uncontrolled: Flexible state management
Icon + text support: Combine icons with labels
Radix UI primitives: Built on accessible components
Press feedback: Visual active state
Disabled state: Prevent interaction when needed
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses aria-pressed to indicate stateProper button role via RadixDisabled state communicated to assistive tech

Keyboard Navigation

Key	Action
`Tab`	Focus the toggle
`Space`	Toggle state
`Enter`	Toggle state

Notes

State change announced to screen readers
Focus ring visible on keyboard focus
Consider adding aria-label for icon-only toggles
Group related toggles with role="group"

Related Components

Toggle Group Switch Button