action · Normal DOM only

ButtonGroup · ToggleGroup

A row of related actions (ButtonGroup) or mutually exclusive / multi-pick toggles (ToggleGroup).

ButtonGroup is a thin layout — it lays out Buttons in a row with the right gap. ToggleGroup adds state: single-select for segmented controls (view switcher, pricing model) and multiple-select for rich-text-style toolbars (bold / italic / underline).

Inside a Twenty front-component, prefer the bridge import

This ButtonGroup · ToggleGroup is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { ButtonGroup } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { ButtonGroup, ToggleGroup } from '@8maverik8/twenty-design';

Examples

ButtonGroup — related actions

tsx
<ButtonGroup>
  <Button variant="secondary" size="sm">Previous</Button>
  <Button variant="secondary" size="sm">Next</Button>
  <Button variant="secondary" size="sm">Skip</Button>
</ButtonGroup>

ToggleGroup — segmented (single)

Current: list

tsx
<ToggleGroup value={view} onValueChange={setView} options={[…]} />

ToggleGroup — formatting (multiple)

tsx
<ToggleGroup type="multiple" value={fmt} onValueChange={setFmt} options={[…]} />

Guidelines

✓

Use ToggleGroup type="single" for view switchers (list / grid / kanban).Mutually exclusive toggles communicate "pick one current state".

✓

Use ToggleGroup type="multiple" for rich-text formatting toolbars.Bold + italic + underline can all be on at once.

Use ButtonGroup for unrelated actions.It implies the buttons belong together. Three random actions in a row read as "decide between these now".