Toggle

Two-state pressable button (on/off) built on Base UI 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. Inside a ToggleGroup it is the group's item, as in Base UI: give it a value, and it takes the group's size, radius, variant and layout in place of its own. An icon-only toggle needs an aria-label; a dev warning fires without one.

Usage

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

Best practices

One independent on/off is a Toggle; a mutually-exclusive or multi-select set is ToggleGroup with Toggles inside it; 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

DataGrid, MonthYearPicker, PageToolbar, ToggleGroup