React Aria
DocsReleasesBlog
React Aria

ToggleButton

A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.

Theme 
isDisabled 
Example
ToggleButton.tsx
ToggleButton.css
import {ToggleButton} from './ToggleButton';

<ToggleButton>Pin</ToggleButton>

Selection

Use the isSelected or defaultSelected prop to set the selection state, and onChange to handle selection changes.

Not starred

import {useState} from 'react';
import {ToggleButton} from './ToggleButton';
import {Star} from 'lucide-react';

function Example(props) {
  let [selected, setSelection] = useState(false);

  return (
    <>
      <ToggleButton
        {...props}
        aria-label="Star"
        isSelected={selected}
        onChange={setSelection}>
        <Star size={18} />
      </ToggleButton>
      <p>{selected ? 'Starred' : 'Not starred'}</p>
    </>
  );
}

API

NameType
idKey

When used in a ToggleButtonGroup, an identifier for the item in selectedKeys. When used standalone, a DOM id.

isSelectedboolean

Whether the element should be selected (controlled).

defaultSelectedboolean

Whether the element should be selected (uncontrolled).

isDisabledboolean

Whether the button is disabled.

children<>

The children of the component. A function may be provided to alter the children based on component state.

onChange(isSelected: boolean) => void

Handler that is called when the element's selection state changes.

Default className: react-aria-ToggleButton

Render PropCSS Selector
isSelectedCSS Selector: [data-selected]
Whether the button is currently selected.
stateCSS Selector: —
State of the toggle button.
isHoveredCSS Selector: [data-hovered]
Whether the button is currently hovered with a mouse.
isPressedCSS Selector: [data-pressed]
Whether the button is currently in a pressed state.
isFocusedCSS Selector: [data-focused]
Whether the button is focused, either via a mouse or keyboard.
isFocusVisibleCSS Selector: [data-focus-visible]
Whether the button is keyboard focused.
isDisabledCSS Selector: [data-disabled]
Whether the button is disabled.

Related pages