ToggleButtonGroup

Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options.

Usage

1import { ToggleButtonGroup, ToggleButton } from '@lenso/ui';

1"use client";2
3import { Bold, Italic, Strikethrough, Underline } from "@gravity-ui/icons";4import { ToggleButton, ToggleButtonGroup } from "@lenso/ui";5
6export function Basic() {7  return (8    <ToggleButtonGroup multiple aria-label="Text formatting">9      <ToggleButton isIconOnly aria-label="Bold" value="bold">10        <ToggleButton.Icon>11          <Bold />12        </ToggleButton.Icon>13      </ToggleButton>14      <ToggleButton isIconOnly aria-label="Italic" value="italic">15        <ToggleButtonGroup.Separator />16        <ToggleButton.Icon>17          <Italic />18        </ToggleButton.Icon>19      </ToggleButton>20      <ToggleButton isIconOnly aria-label="Underline" value="underline">21        <ToggleButtonGroup.Separator />22        <ToggleButton.Icon>23          <Underline />24        </ToggleButton.Icon>25      </ToggleButton>26      <ToggleButton isIconOnly aria-label="Strikethrough" value="strikethrough">27        <ToggleButtonGroup.Separator />28        <ToggleButton.Icon>29          <Strikethrough />30        </ToggleButton.Icon>31      </ToggleButton>32    </ToggleButtonGroup>33  );34}

Anatomy

1import { ToggleButtonGroup, ToggleButton } from '@lenso/ui';2
3export default () => (4  <ToggleButtonGroup selectionMode="multiple">5    <ToggleButton id="first">First</ToggleButton>6    <ToggleButton id="second">7      <ToggleButtonGroup.Separator />8      Second9    </ToggleButton>10    <ToggleButton id="third">11      <ToggleButtonGroup.Separator />12      Third13    </ToggleButton>14  </ToggleButtonGroup>15);

Examples

Sizes

1"use client";2export { Sizes } from "./source";

Orientation

1"use client";2export { Orientation } from "./source";

Full Width

1"use client";2export { FullWidth } from "./source";

Disabled

1"use client";2export { Disabled } from "./source";

Without Separator

Simply omit the <ToggleButtonGroup.Separator /> component from your buttons.

1"use client";2export { WithoutSeparator } from "./source";

Detached

Use isDetached to separate buttons with gaps instead of connecting them.

1"use client";2export { Attached } from "./source";

Selection Mode

Use selectionMode="single" for mutually exclusive choices or selectionMode="multiple" for independent toggles.

1"use client";2export { SelectionMode } from "./source";

Controlled

1"use client";2export { Controlled } from "./source";

Customization

Tailwind CSS

1"use client";2export { CustomStyles } from "./source";

Global CSS

To customize the ToggleButtonGroup component classes, you can use the @layer components directive. Learn more.

1@layer components {2  .toggle-button-group {3    @apply rounded-lg;4  }5
6  .toggle-button-group__separator {7    @apply opacity-25;8  }9
10  .toggle-button-group--full-width {11    @apply w-full;12  }13}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ToggleButtonGroup component uses these CSS classes (View source styles):

Base & Layout Classes [!toc]

• .toggle-button-group - Base container styles
• .toggle-button-group--horizontal - Horizontal orientation
• .toggle-button-group--vertical - Vertical orientation
• .toggle-button-group--full-width - Full width modifier
• .toggle-button-group__separator - Separator element between buttons

Modifier Classes [!toc]

• .toggle-button-group--detached - Detached mode (separated buttons with gaps)

API Reference

ToggleButtonGroup

Inherits from React Aria ToggleButtonGroup.

ToggleButtonGroup.Separator

Note

• ToggleButtonGroup uses React Context to pass size to all child ToggleButton components
• Each ToggleButton must have a unique id prop that corresponds to the keys used in selectedKeys / defaultSelectedKeys
• The isDisabled prop is handled natively by React Aria and disables all child ToggleButtons — individual buttons can override this by setting isDisabled={false}
• The component automatically handles border radius between buttons
• Add <ToggleButtonGroup.Separator /> inside each ToggleButton (except the first) to show dividers between buttons
• Use disallowEmptySelection with selectionMode="single" to ensure one option is always selected

Related Components