ElyriButtonGroup
Button groups that fuse adjacent buttons into one piece, keeping only the outer corners and adding subtle dividers. Horizontal or vertical, attached or detached.
Installation
Add component
pnpm dlx @elyri/cli@latest add button-groupExamples
Basic
Three buttons joined end to end; the hovered button rises above its neighbors.
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
export function Example() {
return (
<ButtonGroup aria-label="Text align">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Center</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
);
}With variants
Solid and outlined buttons such as primary / secondary / danger stay legible when joined.
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
export function Example() {
return (
<div className="demo-ui-row">
<ButtonGroup aria-label="Alignment">
<Button>Left</Button>
<Button>Center</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup aria-label="Archive">
<Button variant="danger">Delete</Button>
<Button variant="danger">Archive</Button>
</ButtonGroup>
</div>
);
}Vertical & detached
orientation="vertical" stacks them; attached={false} adds spacing so each keeps its own shape.
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
export function Example() {
return (
<div className="demo-ui-row">
<ButtonGroup orientation="vertical" aria-label="Zoom">
<Button variant="secondary">Zoom in</Button>
<Button variant="secondary">Zoom out</Button>
<Button variant="secondary">Reset</Button>
</ButtonGroup>
<ButtonGroup attached={false} aria-label="Confirm">
<Button variant="secondary">Cancel</Button>
<Button>Save</Button>
</ButtonGroup>
</div>
);
}With icons
iconOnly turns each segment into a square icon button; leadingIcon keeps an icon beside the label.
import { Button } from './components/elyri/Button';
import { ButtonGroup } from './components/elyri/ButtonGroup';
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, MinusIcon, PlusIcon } from './icons';
export function Example() {
return (
<div className="demo-ui-row">
<ButtonGroup aria-label="Text align">
<Button variant="secondary" iconOnly aria-label="Align left">
<AlignLeftIcon />
</Button>
<Button variant="secondary" iconOnly aria-label="Align center">
<AlignCenterIcon />
</Button>
<Button variant="secondary" iconOnly aria-label="Align right">
<AlignRightIcon />
</Button>
</ButtonGroup>
<ButtonGroup aria-label="Zoom">
<Button variant="secondary" leadingIcon={<MinusIcon />}>
Zoom out
</Button>
<Button variant="secondary" leadingIcon={<PlusIcon />}>
Zoom in
</Button>
</ButtonGroup>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction: horizontal / vertical |
attached | boolean | true | Whether buttons are joined: true fuses them, false keeps a gap |
children | ReactNode | — | Buttons inside the group, usually Button |
...rest | HTMLAttributes<HTMLDivElement> | — | Remaining props are forwarded to the native div |