'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Actions
ButtonGroup and SplitButton
Related buttons joined into one control, and a main action with a menu of related ones.
Ant Design: Space.Compact, Dropdown.Button
import { ButtonGroup, SplitButton } from '@alea/ui';
Examples
Attached buttons and a split button
The group joins the shapes; the split button adds a menu.
Props
ButtonGroup props
Related buttons side by side, joined into one control (Ant Space.Compact, MUI ButtonGroup).
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | What the buttons do together, for screen readers ("Text alignment"). |
attached | boolean | true | Joins the buttons into one shape. Default true; false only spaces them. |
className | string | - | Extra class names for the root element. |
orientation | "horizontal" | "vertical" | 'horizontal' | horizontal (default) or vertical. |
SplitButton props
A main action plus a menu of related ones (Ant Dropdown.Button, MUI split button).
| Prop | Type | Default | Description |
|---|---|---|---|
actionsrequired | { id: Key; label: string; icon?: ReactNode; description?: string | undefined; }[] | - | The other actions in the menu: id, label (and an optional icon or description). |
childrenrequired | ReactNode | - | The main action's label. |
className | string | - | Extra class names for the root element. |
fullWidth | boolean | - | Stretches to the width of its container. |
iconEnd | ReactNode | - | Icon after the label. |
iconStart | ReactNode | - | Icon before the label. |
isLoading | boolean | - | Shows a spinner, keeps the width and tells screen readers it is busy. |
menuLabel | string | 'More options' | Name of the menu button. Default "More options". |
onAction | ((id: Key) => void) | - | Called with the id of the menu action picked. |
size | "sm" | "md" | "lg" | 'md' | sm 32 px, md 40 px (default), lg 48 px. |
variant | "primary" | "secondary" | "ghost" | "danger" | "link" | 'primary' | primary: the dark gradient button; secondary: the chip (white on dark, black on light); ghost: outlined; danger: destructive; link: text only. |
Accessibility
- The group has role group; give it an aria-label when the buttons only make sense together (Zoom, Alignment).
- The split button's menu button has its own name (More options) and opens a real menu.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves between the buttons |
| Enter or Space (menu button) | Opens the menu |
| Arrow keys | Move in the menu |
Do and don't
Do
- Put the most common action on the split button's face.
Don't
- Don't hide destructive actions in the menu without a confirmation.
In Figma
Button group set with 2 to 4 attached buttons; Split button with Variant and Size.