Toggle

PreviousNext

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

Usage

import { Bold } from "lucide-react"
 
import * as Toggle from "@/registry/react-aria/ui/toggle"
 
export function ToggleExample() {
  const [bold, setBold] = React.useState(false)
 
  return (
    <Toggle.Root
      isSelected={bold}
      onChange={setBold}
      variant="primary"
      appearance="outline"
    >
      <Toggle.Icon>
        <Bold className="size-4" />
      </Toggle.Icon>
      Bold
    </Toggle.Root>
  )
}

Examples

Basic Toggle

Component toggle-demo not found in registry.

Ghost Appearance

Component toggle-ghost not found in registry.

Different Sizes

Component toggle-sizes not found in registry.