Components
A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so React Aria implements it using ARIA attributes.
Loading preview...
import { Bold } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleDemo() {
return (
<Toggle aria-label="Toggle italic">
<Bold className="size-4" />
</Toggle>
)
}