| 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. | Help users switch a local mode, view, filter, sort, or presentation immediately without navigation or form submission. | Use a menu button when users need to reveal a short contextual set of commands or links from a single trigger without leaving the current object or toolbar context. | Interrupt users only when the action has a meaningful consequence that cannot be safely recovered afterward. |
| 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. | An unlabeled ellipsis opens a loose panel of buttons, inputs, links, toggles, and destructive commands with no active item. | A popup says Are you sure? with OK and Cancel but does not name the project, notes, or irreversible outcome. |
| Good UX | A user saves a draft, sees Continue become available, then continues without losing the saved status or action hierarchy. | 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 | A disabled Continue button gives no reason, so the user repeatedly presses Save, Cancel, and Back to find a path forward. | 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. |