Toggle

Buttons that stay pressed, alone or in a group.

import { Toggle, ToggleGroup } from 'components/UI/Toggle'

Variants

Use raised by default and flat in toolbars. A toggle stays pressed after a click. The second toggle in each row starts pressed.

flat · toolbars

outline · beside raised

raised primary

raised · default

raised danger

Use a group for a view control, such as List or Grid. Only one toggle in a group is pressed at a time.

flat · toolbars

raised primary

raised · default

Set multiple on the group to let more than one toggle stay pressed.

Set required so the last pressed toggle cannot be unpressed.

Report frequency: weekly

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use a toggle for an on or off state in a toolbar or view control, such as bold text or a view mode. For a setting, use Switch.
For the full appearance and variant rules, see Button.
Set required on ToggleGroup to keep one option pressed, and give it an initial value.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
appearance	'flat' \| 'raised' \| 'outline'	'raised'	The shape: flat, raised 3D, or outlined.
variant	'primary' \| 'secondary' \| 'danger'	'secondary'	The meaning and color: brand orange, neutral, or destructive red.
size	'sm' \| 'md' \| 'lg'	'md'	Height and text size. In a ToggleGroup, the group sets it.

Prop	Type	Default	Description
appearance	'flat' \| 'raised' \| 'outline'	'raised'	The shape: flat, raised 3D, or outlined. Sets it for every button in the group.
variant	'primary' \| 'secondary' \| 'danger'	'secondary'	The meaning and color: brand orange, neutral, or destructive red. Sets it for every button in the group.
required	boolean	false	Keeps at least one toggle pressed, in single and multiple mode. Set an initial value.
size	'sm' \| 'md' \| 'lg'	'md'	Sets the size of every toggle in the group.