Toggle

Two-state pressable button (on/off) built on Radix Toggle, with an optional icon alongside the label. Pass icon with no children to get a square icon-only toggle (auto-detected and sized to match its height); pass both for an icon + label. Controlled via pressed/onPressedChange, uncontrolled via defaultPressed.

Usage

import { Toggle, ToggleRadius, ToggleSize, toggleVariants } from "@desk/ui/components/toggle";

Best practices

One independent on/off is a Toggle; a mutually-exclusive or multi-select set is ToggleGroup; an instantly-applied setting is Switch.
Pass icon with no children for a square icon-only toggle (auto-sized); with a label, order it via iconPlacement.

Props

Prop	Type	Default	Description
variant	`"default" \| "secondary" \| null \| undefined`
radius	`"rounded" \| "full" \| null \| undefined`
icon	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`		Icon rendered beside the label, or alone for an icon-only toggle.
iconPlacement	`"end" \| "start"`	`"start"`	Icon position relative to the label.
size	`ResponsiveValue<ToggleSize>`	`"base"`	Toggle size — a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`. Icon-only sizing follows the base breakpoint.

Also exports

typeToggleRadius
typeToggleSize
consttoggleVariants

Composition

Builds on

Icon

Used by

MonthYearPicker, ToggleGroup