Toggle Button

<ToggleButton>
  <PinIcon />
</ToggleButton>

Installation

npx dotui-cli@latest add toggle-button

Usage

Toggle button allow users to toggle a selection on or off, for example, switching between two states or modes.
They can have a label, an icon, or both. An icon is provided by passing an icon component as child to the ToggleButton or by using the prefix and suffix props. A visible label can be provided by passing a string as a child.

Options

Variants

Use the variant prop to control the visual style of the toggle button. The default size is "quiet".

<ToggleButton variant="quiet"><PinIcon /></ToggleButton>
<ToggleButton variant="outline"><PinIcon /></ToggleButton>
<ToggleButton variant="accent"><PinIcon /></ToggleButton>

Sizes

Use the size prop to control the size of the toggle button.
The default size is "md".

<ToggleButton size="sm"><PinIcon /></ToggleButton>
<ToggleButton size="md"><PinIcon /></ToggleButton>
<ToggleButton size="lg"><PinIcon /></ToggleButton>

Shapes

Use the shape prop to control the shape of the toggle button. The default shape is "rectangle".
Icon-only toggle buttons should include an aria-label.

<ToggleButton shape="square"><PinIcon /></ToggleButton>
<ToggleButton shape="circular"><PinIcon /></ToggleButton>
<ToggleButton prefix={<PinIcon />} shape="rectangle">Pin</ToggleButton>

Disabled

Use the isDisabled prop to disable the toggle button.

<ToggleButton isDisabled><PinIcon /></ToggleButton>

Uncontrolled

Use the defaultSelected to set the initial state of the toggle button.

<ToggleButton defaultSelected><PinIcon /></ToggleButton>

Controlled

Use the isSelected and onChange props to control the state of the toggle button.

const [isSelected, setSelected] = React.useState(true);
return (
  <ToggleButton isSelected={isSelected} onChange={setSelected}>
    <PinIcon className="rotate-45" />
  </ToggleButton>
);

API Reference

Accessibility

Keyboard interactions