ToggleButton

ToggleButton uses the Button component under the hood and defaults to the outline variant.

<ToggleButton>Toggle</ToggleButton>

Since it's built on top of Button, it supports most of the same props so you can tweak color and size, add icons, and more:

<ToggleButton size="xlarge" icon={<PinIcon />}>
  Pin
</ToggleButton>

Just like native inputs in React, ToggleButton can be used as a controlled or uncontrolled component. By default, it's uncontrolled and lets you set its initial state with the defaultChecked prop. In this mode, change events are handled automatically.

<ToggleButton defaultChecked>Toggle</ToggleButton>

To manually control the state, use the checked prop. This gives you full control over the component's value and turns off automatic handling. You'll need to update the state using the onChange handler, which also lets you add custom logic before updating.

<ToggleButton checked>Toggle</ToggleButton>

To make ToggleButton non-interactive, use the disabled flag. Just like with native checkbox fields, this prevents the onChange handler from firing.

<ToggleButton disabled>Toggle</ToggleButton>

• Space / Enter – Toggle the focused button's selection.

• Provide aria-label via attributes when ToggleButton doesn't have a visible text label.