Button Toggle – Code

Implementation
ButtonToggle Props

Common Examples

To use the ButtonToggle, pass a required label and control selection with React Aria’s isSelected and onChange. Use defaultSelected instead for uncontrolled selection. The kit forbids children.

<ButtonToggle
  label="Bold"
  isSelected={bold}
  onChange={setBold}
  icon={<IconBold />}
/>

A bare icon creates an icon-only toggle. label becomes its accessible name and tooltip. Use { icon, position } to show the label beside the icon.size is "medium", "small", or "xsmall". On coarse pointers, xsmall promotes to a 40×40 minimum touch target.

React Accessibility

React Aria provides keyboard, pointer, focus-visible, and selection behavior.
label is always required, including for icon-only toggles.
Use a short imperative label such as “Bold” or “List view.”

`ButtonToggle` Props

The ButtonToggle accepts the following props. It also forwards remaining React Aria ToggleButton props except children, render-prop className, and style.

string

required

Visible label, or the accessible name and tooltip for an icon-only toggle.

string

Class merged onto the button.

boolean

Initial selection for uncontrolled use.

ButtonIcon

Bare icon for an icon-only toggle, or { icon, position } for an icon paired with the visible label.

boolean

Disables the toggle.

boolean

Controlled selected state.

(isSelected: boolean) => void

Fired when selection changes.

"medium" | "small" | "xsmall"

default:"medium"

Target size.

AI Kit

Agent Experience

Button Toggle – Code

Common Examples

React Accessibility

`ButtonToggle` Props

​Common Examples

​React Accessibility

​ButtonToggle Props

Common Examples

React Accessibility

`ButtonToggle` Props