UI components · Actions
Button Group
Also called: Split button, Grouped buttons, ButtonGroup, Btn group
A few related buttons joined into one group with shared borders and no gaps, like "Print | Export | Share," or a split button like "Ship ▾" that pairs the main action with a dropdown arrow.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstPut two sets of buttons on the right side of the order detail page header. First, a button group "Print | Export | Copy link": three 32px-tall buttons that share a 1px border with no gap between them, with 6px rounded corners only on the far left and far right. Give the group role="group" and aria-label="Order actions." Second, a split button: the left half is a dark primary button "Ship" that runs right away; the right half is a 32px-wide ▾ arrow that opens a dropdown "Ship and print label / Partial shipment / Schedule pickup," with a thin divider between the halves. Clicking a button only runs the action. It doesn't stay selected. Below 640px wide, collapse the first group into a "More ⋯" dropdown.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Button Group is what you need.
Use Button Group when
- Several actions of the same kind and importance that belong together, like "Print / Export / Share"
- Actions that come in pairs, like previous and next, or zoom in and zoom out
- A default action with a few variations. Use a split button, so the default is one click and the rest sit in the arrow menu.
Pick something else when
Only one option can be chosen and the current choice must stay visible (Day / Week / Month)
Use insteadSegmented ControlActions with different weights, like Submit and Cancel. Keep them apart and use primary and secondary buttons.
Use insteadButtonMore than 5 actions. Joined together it gets too long, so move the less common ones into a "More" dropdown menu.
Use insteadDropdown Menu
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Using a button group for a pick-one switch like Day / Week / Month, so after clicking you can't tell which one is selected
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Every button in the group is a dark primary button, so you can't tell which action matters most
- 03
Putting a dangerous action like Delete right next to Edit and Copy, where one slip clicks the wrong one
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
2 to 4 buttons placed right against each other. Neighbors share borders, and only the ends are rounded. A split button is a main action button plus an arrow button that opens a dropdown menu.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A button group puts several related Buttons side by side. Neighbors share a border, and only the two ends are rounded, so it reads as one unit. Common examples: "Previous | Next" on a detail page, "Print | Export | Share" on a document, and the split button. Click the left part of a split button to run the default action, "Ship." The small arrow on the right opens a Dropdown Menu with variations like "Ship and print label" or "Partial shipment."
It's easy to confuse with a Segmented Control. They look almost the same, but a segmented control is "pick one." In Day / Week / Month, one is always selected, and it switches the view. In a button group, each button is a one-off action, and it doesn't stay "pressed" after you click it. Whenever you need to show "which one is selected," use a segmented control or radio buttons. It's also different from a Toolbar. A toolbar is a whole bar that can hold several button groups, dropdowns, and a search box.
Put 2 to 4 actions of the same kind and importance in a group, all the same size and style. Keep buttons with different weights (Save and Cancel) apart instead of joining them. Use at most one primary button per group, and make it clear the two halves of a split button are separate click targets. In an icon-only group, give every button a tooltip and an aria-label, and give the group role="group" and a label.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-button-group- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="group"]:has(> button + button):not(:has(> [role="radio"], > [aria-pressed])).btn-group:not(:has(> .btn-check)).ant-btn-group.ant-space-compact:has(> .ant-btn + .ant-btn).ant-dropdown-button.el-button-group[class*="MuiButtonGroup-root"].arco-btn-group.n-button-group[data-slot="button-group"]
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
button-groupbtn-groupbuttons-groupbutton-setsplit-buttonsplit-btnbtn-splitaction-group
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
ButtonGroupBtnGroupSplitButtonDropdownButton
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026