ButtonGroup

Group related buttons with shared appearance and an optional frame.

Give a group an accessible name and place related buttons inside it. The group joins adjacent borders and can apply a shared size, variant, and color. Buttons retain their own tab stops.

State ownership

ButtonGroup coordinates appearance, not selection. It has no controlled or uncontrolled selection mode. Each button receives its own action handler and application state; see Button’s state ownership example for loading behavior.

For a mutually exclusive choice, use RadioGroup, which owns selection for its radio controls.

Usage

import { Button, ButtonGroup } from 'twenty-ui/primitives/input';

export const RecordActions = () => (
  <ButtonGroup aria-label="Record actions" size="sm">
    <Button>Edit</Button>
    <Button>Duplicate</Button>
  </ButtonGroup>
);

Props

attached · boolean · default: "true"

Join adjacent controls. Set to false for independently rounded buttons with a 2px gap.

color · "accent" | "danger" | "neutral" | "success"

Shared semantic color that overrides the color of buttons in the group.

framed · boolean · default: "false"

Add a translucent frame with padding and concentric corners. Button sizes and appearance remain independent unless set on the group.

render · ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

size · "md" | "sm"

Shared button height that overrides the size of buttons in the group.

variant · "ghost" | "outline" | "soft" | "solid"

Shared surface treatment that overrides the variant of buttons in the group.

Detached controls

Set attached={false} to keep each control’s rounded corners and a 2px gap. Shared size, surface, and color still apply through wrappers and tooltip anchors.

Framed controls

Set framed to add a translucent background, border, 2px padding, and concentric corners. The frame works with attached or detached controls and preserves each button’s size and appearance unless you set them on the group. Use size="xs" on LightIconButton for compact 20px actions.

import { LightIconButton } from 'twenty-ui/components';
import { IconPlus, IconTrash } from 'twenty-ui/icon';
import { ButtonGroup } from 'twenty-ui/primitives/input';

export const CompactRecordActions = () => (
  <ButtonGroup framed attached={false} aria-label="Record actions">
    <LightIconButton size="xs" aria-label="Add" emphasis="subtle">
      <IconPlus />
    </LightIconButton>
    <LightIconButton size="xs" aria-label="Delete" emphasis="subtle" disabled>
      <IconTrash />
    </LightIconButton>
  </ButtonGroup>
);

Updating existing groups

Replace IconButtonGroup and its iconButtons array with ButtonGroup framed attached={false} and explicit children. Replace InsideButton with LightIconButton size="xs". Each button owns its accessible name, action handler, disabled state, and optional tooltip.