Components
Toggle
A two-state button that can be either on or off. Use it for a single formatting control — bold, italic, mute — where the pressed state holds until the user toggles it back.
Preview
Rendered with live Cognition tokens — hover and the pressed state (an accent surface with primary text) remap on theme change, no dark: classes. Click a control to toggle it.
Variants
<Toggle aria-label="Toggle bold">
<Bold />
</Toggle><Toggle variant="outline" aria-label="Toggle italic">
<Italic />
</Toggle><Toggle aria-label="Toggle bold">
<Bold />
Bold
</Toggle><Toggle size="sm" aria-label="Bold"><Bold /></Toggle>
<Toggle size="default" aria-label="Bold"><Bold /></Toggle>
<Toggle size="lg" aria-label="Bold"><Bold /></Toggle>default is borderless for toolbars; outline adds a border when it stands alone. Pair an icon with a label for clarity, and use size for sm / default / lg.
States
<Toggle aria-label="Toggle bold">
<Bold />
</Toggle><Toggle defaultPressed aria-label="Toggle bold">
<Bold />
</Toggle><Toggle disabled aria-label="Toggle bold">
<Bold />
</Toggle>Off is transparent; on fills with the accent surface and primary text (data-[state=on]); a disabled toggle dims to 50% and stops responding.
API
Don't and Do
Don't use a Toggle for a setting that needs an explicit on/off label — that's a Switch. And don't group mutually exclusive options with separate Toggles; reach for a toggle group or Tabs so only one stays pressed.
<Toggle aria-label="Toggle bold">
<Bold />
</Toggle>import { Toggle } from "@/components/ui/toggle";
import { Bold } from "lucide-react";
export function BoldToggle() {
const [pressed, setPressed] = useState(false);
return (
<Toggle
pressed={pressed}
onPressedChange={setPressed}
aria-label="Toggle bold"
>
<Bold />
</Toggle>
);
}