ToggleButton

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

isDisabled

Example

ToggleButton.tsx

ToggleButton.css

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

Name	Type
`id`	`Key`
When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id.
`isSelected`	`boolean`
Whether the element should be selected (controlled).
`defaultSelected`	`boolean`
Whether the element should be selected (uncontrolled).
`isDisabled`	`boolean`
Whether the button is disabled.
`children`	`ChildrenOrFunction<ToggleButtonRenderProps>`
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 Prop	CSS Selector
`isSelected`	CSS Selector: `[data-selected]`
Whether the button is currently selected.
`state`	CSS Selector: `—`
State of the toggle button.
`isHovered`	CSS Selector: `[data-hovered]`
Whether the button is currently hovered with a mouse.
`isPressed`	CSS Selector: `[data-pressed]`
Whether the button is currently in a pressed state.
`isFocused`	CSS Selector: `[data-focused]`
Whether the button is focused, either via a mouse or keyboard.
`isFocusVisible`	CSS Selector: `[data-focus-visible]`
Whether the button is keyboard focused.
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the button is disabled.