ButtonGroup

Give a group an accessible name and place related buttons inside it. The group joins adjacent borders and can apply defaults for 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>
);

Appearance precedence

Each appearance prop resolves independently: the child’s explicit prop, then the group default, then the component default. This applies to both Button and IconButton, including an explicit IconButton size="xs". Defaults reach children through fragments, wrappers, and tooltip anchors.

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

export const ActivityActions = () => (
  <ButtonGroup
    aria-label="Activity actions"
    variant="solid"
    color="accent"
    size="sm"
  >
    <Button>New activity</Button>
    <Button variant="ghost" color="danger" size="md">
      Delete activity
    </Button>
    <Button color="neutral">Duplicate activity</Button>
  </ButtonGroup>
);

Props

boolean

default:"true"

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

"accent" | "danger" | "neutral" | "success"

Default semantic color for children without an explicit color.

boolean

default:"false"

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

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.

"md" | "sm"

Default button height for children without an explicit size.

"ghost" | "link" | "outline" | "soft" | "solid"

Default surface treatment for children without an explicit variant.

Detached controls

Set attached={false} to keep each control’s rounded corners and a 2px gap. Group defaults still apply through wrappers and tooltip anchors; explicit child props take precedence.

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 explicit child appearance. Use size="xs" on IconButton for compact 20px actions.

import { IconButton } from 'twenty-ui/components/input';
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">
    <IconButton size="xs" aria-label="Add" variant="ghost">
      <IconPlus />
    </IconButton>
    <IconButton size="xs" aria-label="Delete" variant="ghost" disabled>
      <IconTrash />
    </IconButton>
  </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.

Overview

Apps

API

Self-Host

Contribute

UI Library

State ownership

Usage

Appearance precedence

Props

Detached controls

Framed controls

Updating existing groups

​State ownership

​Usage

​Appearance precedence

​Props

​Detached controls

​Framed controls

​Updating existing groups

State ownership

Usage

Appearance precedence

Props

Detached controls

Framed controls

Updating existing groups