A two-state on/off button.
import { Toggle } from "@cooud-ui/ui";
npx cooud-ui add toggle
Generated from the component's exported types.
Extends ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "default" | — |
size | "sm" | "md" | "lg" | "md" | — |
On this page
A two-state button. Control it with `pressed` and `onPressedChange`.
const [bold, setBold] = useState(false);return (<Toggle pressed={bold} onPressedChange={setBold} aria-label="Toggle bold"><Bold />Bold</Toggle>);
The outline variant keeps a visible border in both states.
const [italic, setItalic] = useState(false);return (<Togglevariant="outline"pressed={italic}onPressedChange={setItalic}aria-label="Toggle italic"><Italic />Italic</Toggle>);
Toggles come in three sizes to match surrounding controls.
const [pressed, setPressed] = useState(true);return (<div className="flex items-center gap-3"><Toggle size="sm" pressed={pressed} onPressedChange={setPressed} aria-label="Bold (small)"><Bold /></Toggle><Toggle size="md" pressed={pressed} onPressedChange={setPressed} aria-label="Bold (medium)"><Bold /></Toggle><Toggle size="lg" pressed={pressed} onPressedChange={setPressed} aria-label="Bold (large)"><Bold /></Toggle></div>);