ToggleButton

ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.

children

size

staticColor

isQuiet

isEmphasized

isDisabled

import {ToggleButton} from '@react-spectrum/s2/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 {ToggleButton} from '@react-spectrum/s2/ToggleButton';
import {useState} from 'react';
import Star from '@react-spectrum/s2/icons/Star';

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

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

API

<ToggleButton>
  <Icon /> or <Avatar />
  <Text />
</ToggleButton>

ToggleButton

Name	Type	Default
`children`	`ReactNode`	Default: —
The content to display in the button.
`isEmphasized`	`boolean`	Default: —
Whether the button should be displayed with an emphasized style.
`id`	`Key`	Default: —
When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id.
`isSelected`	`boolean`	Default: —
Whether the element should be selected (controlled).
`defaultSelected`	`boolean`	Default: —
Whether the element should be selected (uncontrolled).
`isDisabled`	`boolean`	Default: —
Whether the button is disabled.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`size`	`'XS' \| 'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the ActionButton.
`staticColor`	`'black' \| 'white' \| 'auto'`	Default: —
The static color style to apply. Useful when the ActionButton appears over a color background.
`isQuiet`	`boolean`	Default: —
Whether the button should be displayed with a quiet style.

`onChange`	`(isSelected: boolean) => void`	Default: —
Handler that is called when the element's selection state changes.