useToggleButton

Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.

Example

ToggleButton.tsx

ToggleButton.css

Example

ToggleButton.tsx

ToggleButton.css

import {ToggleButton} from './ToggleButton';

<ToggleButton>Pin</ToggleButton>

API

useToggleState(props: ToggleStateOptions): ToggleState

useToggleButton(
  props: AriaToggleButtonOptions<ElementType>,
state: ToggleState,
ref: RefObject<any>
): ToggleButtonAria<HTMLAttributes<any>>

ToggleState

Properties

Name	Type
`isSelected`	`boolean`
Whether the toggle is selected.
`defaultSelected`	`boolean`
Whether the toggle is selected by default.

Methods

`setSelected(isSelected: boolean): void`
Updates selection state.
`toggle(): void`
Toggle the selection state.

AriaToggleButtonProps

Name	Type	Default
`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.
`children`	`ReactNode`	Default: —
The content to display in the button.
`elementType`	`ElementType \| JSXElementConstructor<any>`	Default: `'button'`
The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.

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