Toggle Button

Toggle button group displays a set of options and allows user to select only one. Individual toggle buttons are only meaningful inside the group, not standalone. The default height is 32px.

#Example

#Usage

#Separated

Use the separated variant when the group needs more visual weight.

#Large

When the toggle button is large, it has a larger height of 64px, and icons go on their own row.

#Small

When the toggle button is small, it has a smaller height of 24px.

#Auto width

Usually it's best to let the group manage its own size, but "width" can be set to "auto" to let the parent take over.

#Icon

Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration.

#Disabled

A disabled button indicates that an action exists, but is not available currently.

#Guidelines

#When to use

• When user switches between a small set of labeled modes, especially when options pair an icon or other accessory with the label.

#When not to use

• If options are plain short labels switching views or modes on the same content, use a segmented control instead.

#Props

#ToggleButtonGroup

Name	Default	Description
isDisabled	false	boolean Determines if all radios are disabled.
children	—	ReactNode Radio inputs.
size	—	"sm" | "md" | "lg" Toggle button size.
value	—	string | undefined Selected radio value.
onChange	—	(value: string) => void Callback for when user selects a different radio option.
width	—	"auto"
variant	—	"segmented" | "separated" Default: "segmented"

#ToggleButton

Name	Default	Description
aria-label	—	string Toggle button's meaning for screen readers
isDisabled	—	boolean Determines if toggle button is disabled.
accessory	—	IconAccessoryType Primary icon that's displayed on the left.
label	—	ReactNode Toggle button label.
value	—	string Toggle button value.
tooltip	—	Omit<TooltipProps, "children"> Tooltip to display when hovering over the toggle button.