Use a button group for a small visible set of related commands, a segmented control for one active local mode, a menu button for hidden secondary commands, and a confirmation dialog after a risky command needs review.
Use a button group for a small visible set of related commands, a segmented control for one active local mode, a menu button for hidden secondary commands, and a confirmation dialog after a risky command needs review.
Practice the judgment: Imagine this situation: A destructive Delete button sits directly beside Continue and is triggered by input mistakes. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Button group | Segmented control | Menu button | Confirmation dialog |
|---|---|---|---|---|
| UI or UX | UI + UX - Grouped visible action buttons | UI + UX - Compact mode selector | UI + UX - Button-controlled popup menu of actions or links | UI + UX - Consequential alert decision |
| UI guidance | Render a small group of visibly related action buttons with one clear scope, one dominant primary action when needed, lower-emphasis alternatives, consistent labels, visible focus, and stable spacing. | Render a compact horizontal group with two to four adjacent segments, one selected state, visible focus, and stable sizing. | Render a named button trigger, visible opened state, controlled popup, menu items, active item styling, disabled item state, separator or section grouping, and a safe way to distinguish destructive commands. | Render an alert-style modal decision with a specific title, consequence description, safe cancellation, and a destructive action label that names the object or scope. |
| UX guidance | Use a button group when users need to choose between a few related commands at the same workflow moment, such as saving, continuing, going back, cancelling, applying, resetting, or exporting in one local task. | Avoid using segments for unrelated pages, hidden content sections, destructive actions, or choices that need long explanation. | Make dismissal, activation, focus return, unavailable actions, and high-risk command handoff predictable so the menu behaves like a command chooser rather than a hidden form. | Help the person reach a clear task outcome. |
| Good UI | A form footer shows Save draft, Continue, and Cancel as one named action group, with Continue primary only after required work is saved. | Two to four adjacent segments with a clear selected segment, visible focus ring, and readable labels that fit on one row. | A table row has a Report actions button that opens a compact menu with Open, Rename, Duplicate, Archive, and an unavailable Export item. | Delete Research archive? explains that 14 notes and shared links will be permanently removed, offers Keep archive, and labels the danger action Delete archive. |
| Bad UI | A footer contains Save, Continue, Delete, Help, View report, and Open settings as identical primary buttons. | Many cramped segments with truncated text. | A primary Save action is hidden behind More while lower-priority icons remain visible. | The red destructive action is enabled immediately and sits where users expect the routine primary button. |
| Good UX | A user chooses Reset changes from a separated danger action and receives a clear reset result instead of accidentally resetting beside Continue. | Selecting a segment changes a nearby local mode, filter, or view immediately. | A user opens Report actions, arrows to Duplicate report, activates it, and focus returns to the Report actions trigger with a status update. | Cancel, Escape, and Keep archive leave the archive unchanged and return focus to Delete archive. |
| Bad UX | Users hesitate because Save, Submit, Continue, and Next are all high-emphasis buttons in the same group. | Using segments for unrelated destinations. | A user tabs into a menu and lands in a text input because the menu contains unrelated form controls. | Every archive, filter, and dismiss action opens the same confirmation until users click through automatically. |
| Best fit | A form, dialog, panel, card, or workflow footer needs two to four related visible commands. | There are a few mutually exclusive modes. | A local object or toolbar has three to eight secondary commands. | The action is destructive, irreversible, costly, security-sensitive, privacy-affecting, or externally visible. |
| Avoid when | The controls are mutually exclusive view modes that need a selected state. | Options are full content sections needing tab semantics. | The job is choosing a form value, selecting several values, or browsing a long list. | The action is routine and easily reversible. |
| Required state | Default group with a clear label or surrounding context. | Default selected segment. | Closed trigger state with visible or accessible name. | Pre-action state with an explicit consequential trigger. |
| Accessibility burden | Use native button elements for actions so Enter and Space activation, disabled behavior, and focus work predictably. | Expose selected or pressed state and the group name. | Use an actual button for the trigger when possible. | Use alertdialog semantics or platform equivalent when the decision is urgent and requires a response. |
| Common misuse | Putting unrelated actions into one row because the layout has space. | Using segments for unrelated page navigation. | Using a menu button for long value selection that should be a select, listbox, combobox, or multi-select. | Asking users to confirm every routine action until they stop reading. |