ButtonGroup
A toolbar-style container that gathers related buttons on a shared surface, with dividers between items, ghost children, and group-level emphasis for the last action.
Default
Buttons inside a ButtonGroup always render as the ghost variant and sit on a surfaced container with short centered dividers between them.
<ButtonGroup>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>Installation
import { ButtonGroup, Button } from "madagent";Toolbar
The canonical composition: icon-only actions keep full-strength icon color, while icons sitting beside text render muted.
Icon-only actions
<ButtonGroup aria-label="Text formatting">
<Button icon={<Icon icon={Bold} size="sm" />} aria-label="Bold" />
<Button icon={<Icon icon={Italic} size="sm" />} aria-label="Italic" />
<Button icon={<Icon icon={Underline} size="sm" />} aria-label="Underline" />
</ButtonGroup>Labeled actions with muted icons
<ButtonGroup aria-label="Item actions">
<Button icon={<Icon icon={Copy} size="sm" />}>Copy</Button>
<Button icon={<Icon icon={Edit} size="sm" />}>Edit</Button>
<Button icon={<Icon icon={Trash2} size="sm" />}>Delete</Button>
</ButtonGroup>Override
Children always render as ghost — per-child variant overrides are not supported inside a ButtonGroup. To emphasize an action, set override on the group: it colors the LAST child's text and icon with the accent or negative content tokens while keeping the ghost treatment.
Negative
Use override="negative" when the group ends in a destructive action.
<ButtonGroup override="negative" aria-label="Item actions">
<Button icon={<Icon icon={Copy} size="sm" />}>Copy</Button>
<Button icon={<Icon icon={Edit} size="sm" />}>Edit</Button>
<Button icon={<Icon icon={Trash2} size="sm" />}>Delete</Button>
</ButtonGroup>Accent
Use override="accent" when the group ends in its primary action.
<ButtonGroup override="accent" aria-label="Document actions">
<Button>Cancel</Button>
<Button>Preview</Button>
<Button icon={<Icon icon={Save} size="sm" />}>Save</Button>
</ButtonGroup>Sizes
Set size on the group to apply it as the default for every Button child that doesn't set its own.
<div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
<ButtonGroup size="sm">
<Button>Small</Button>
<Button>Group</Button>
</ButtonGroup>
<ButtonGroup size="md">
<Button>Medium</Button>
<Button>Group</Button>
</ButtonGroup>
<ButtonGroup size="lg">
<Button>Large</Button>
<Button>Group</Button>
</ButtonGroup>
</div>Disabled
Set disabled on the group to disable every child. An individual Button can opt back in with an explicit disabled={false}.
<div style={{ display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-start" }}>
<ButtonGroup disabled>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup disabled>
<Button>One</Button>
<Button disabled={false}>Two (re-enabled)</Button>
<Button>Three</Button>
</ButtonGroup>
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
override | "accent""negative" | - | Emphasizes the group's LAST child: keeps the ghost treatment but colors its text and icon with the accent or negative content tokens. Children always render as ghost — per-child variant overrides are not supported |
size | "sm""md""lg" | "md" | Default size applied to Button children that don't set their own |
disabled | boolean | false | Disables every Button child that doesn't explicitly opt back in with disabled={false} |
children | ReactNode | - | Button elements to place in the group. A divider is rendered between adjacent children automatically |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
<ButtonGroup override="negative" aria-label="إجراءات العنصر">
<Button icon={<Icon icon={Copy} size="sm" />}>نسخ</Button>
<Button icon={<Icon icon={Edit} size="sm" />}>تعديل</Button>
<Button icon={<Icon icon={Trash2} size="sm" />}>حذف</Button>
</ButtonGroup>