Skip to main content

Function: ToggleButton()

ToggleButton(__namedParameters): Element

Defined in: components/ToggleButton/ToggleButton.tsx:172

A two-state toggle button (Action entity). Unlike Button, its selection is persistent: the engaged state renders the pressed color (not the transient active), and React Aria exposes it via aria-pressed.

Use for toolbar toggles ("Bold", "Italic") and single on/off controls that read as buttons. It wears the utility silhouette it shares with ActionButton — a toggle operates on content, it is not a command the user commits to. For a set of mutually-related toggles, wrap them in ToggleButtonGroup.

Anatomy (data-part): root · icon · label. Omit children for the icon-only square, which is the common toolbar shape.

Parameters

ParameterType
__namedParametersToggleButtonProps

Returns

Element

Example

<ToggleButton>Bold</ToggleButton>
<ToggleButton defaultSelected>Grid view</ToggleButton>
<ToggleButton icon={<Icon intent="action.search" />} aria-label={label} />