Button Group
Buttons that belong together, drawn as one control.
Default
Outlined buttons already carry a border, so joining them is enough.
Actions that sit side by side and share a job: archive, report, snooze. The group drops the roundness on the edges where two children meet and pulls them together by a pixel, so their borders read as one line. It takes whatever you put in it — buttons, an input, a select's trigger, another group.
Installation
npx philcn@latest add button-groupThe file is written into your project. It is yours from then on — change it as you like.
Examples
With a separator
Filled buttons have no border, so the divider has to be drawn.
Split button
The common action, and a menu holding the rest. This page uses it at the top.
Vertical, and with text
A column of buttons, and a row holding something read rather than pressed.
Props
| Prop | Type | What it does |
|---|---|---|
| ButtonGroup.orientation | "horizontal" | "vertical" | null | A row or a column. It decides which edges are joined, and which way the separator runs. |
Types are read from the library itself, so this table cannot describe an option the code no longer has. Everything else you pass goes straight to the underlying <div>.
Worth knowing
- Give the group a name with `aria-label`: a screen reader announces it as a group, and a group without a name is one more thing to work out.
- This is for actions. For buttons that hold a state — bold, italic — use Toggle Group instead.
- A group inside a group is spaced rather than joined, which is how clusters are made.