Actions

Toggle Button

A button that stays on or off after a press.

When to use it: Use one for an independent setting or a group for small formatting choices.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Toggle Button.tsxtsx

import { ToggleButton, ToggleButtonGroup } from "@comp0/react";

export function Example() {
  return (
    <ToggleButtonGroup
      type="multiple"
      defaultValue={["bold"]}
      aria-label="Text style"
      className="inline-flex divide-x divide-zinc-950/10 overflow-hidden rounded border border-zinc-950/10 [&>button]:px-3 [&>button]:py-2.5 [&>button]:text-base [&>button]:text-zinc-950 [&>button]:outline-teal-600 [&>button]:focus-visible:outline-2 [&>button[data-selected]]:bg-teal-100 [&>button[data-selected]]:text-teal-950 sm:[&>button]:py-2 sm:[&>button]:text-sm dark:divide-white/10 dark:border-white/10 dark:[&>button]:text-zinc-50 dark:[&>button]:outline-teal-400 dark:[&>button[data-selected]]:bg-teal-950 dark:[&>button[data-selected]]:text-teal-50"
    >
      <ToggleButton value="bold">Bold</ToggleButton>
      <ToggleButton value="italic">Italic</ToggleButton>
      <ToggleButton value="underline">Underline</ToggleButton>
    </ToggleButtonGroup>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

ToggleButtonGroupOptional
Optional group; it announces the relationship and manages selection once type, value, defaultValue, or onChange is set. Owns a DOM element.
ToggleButton
Native button that owns the press target. Owns a DOM element.

Step by step

1
Add the main part
Start with one ToggleButton.
2
Add the supporting parts
Wrap related toggles in ToggleButtonGroup; give each button a value when the group should manage the selection.
3
Make the behavior clear
Pass type="single" or type="multiple" with value/defaultValue and onChange on the group, or keep defaultSelected per button when the group only organizes them.
Exampletsx
```
<ToggleButtonGroup type="multiple" defaultValue={["bold"]} aria-label="Text style"><ToggleButton value="bold">Bold</ToggleButton></ToggleButtonGroup>
```

Keyboard

↵: Toggles the button.
Space: Toggles the button.

Forms and accessibility

Toggle buttons do not create native form values.

Accessibility checklist

Give icon-only toggles an aria-label.
Make the selected state visible, not only color.
Explain what on and off mean when it is not obvious.

API reference

Importtsx

import { ToggleButton, ToggleButtonGroup } from "@comp0/react";

`ToggleButtonGroup`

OptionalDOM element

Optional group; it announces the relationship and manages selection once type, value, defaultValue, or onChange is set.

Prop	Type	Description
`aria-label`	`string`	Names the group for assistive technology.
`orientation`	`"horizontal" \| "vertical"`	Direction exposed through data-orientation for styling.
`type`	`"single" \| "multiple"`	Whether the group keeps one value or many.
`value`	`string \| string[]`	Controlled selection: a string for single, a string[] for multiple.
`defaultValue`	`string \| string[]`	Initial selection: a string for single, a string[] for multiple.
`onChange`	`(value: string \| string[]) => void`	Receives the next selection; "" when a single group empties.

`ToggleButton`

DOM element

Native button that owns the press target.

Prop	Type	Description
`value`	`string`	Identifies the button inside a selection-managing group.
`selected`	`boolean`	Controlled on state when standalone.
`defaultSelected`	`boolean`	Initial on state when standalone.
`onChange`	`(selected: boolean) => void`	Receives the next on state.
`disabled`	`boolean`	Disables the toggle.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-selected] on ToggleButton: The button is on.
[data-disabled] on ToggleButton: It cannot change.

Example

Anatomy

Step by step

Add the main part

Add the supporting parts

Make the behavior clear