Learn 36 Action & Menu concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
The highest-emphasis button for the main action in the current view.
Create one accessible primary button for the view’s most important action. Use concise verb-first text, native button semantics, visible hover, focus, pressed, loading and disabled states, and enough contrast without relying on color alone.A medium-emphasis action that supports or offers an alternative to the primary action.
Create an accessible secondary button beside a primary action, using lower visual emphasis while preserving the same target size, readable label, focus visibility and full keyboard behavior.A low-emphasis button for optional actions that should remain discoverable.
Create an accessible tertiary button for an optional action, with a text-forward appearance, a clear hover surface, visible keyboard focus, a generous hit area and no confusion with ordinary navigation links.A minimally styled action that becomes more visible on hover or focus.
Create an accessible ghost button for a low-priority action, keeping its label readable against every background and providing unmistakable hover, active and focus-visible states without adding permanent visual weight.A danger-styled action that can remove data or cause a difficult-to-reverse change.
Create an accessible destructive button labelled with the exact consequence, separate it from routine actions, use text and iconography beyond red alone, require confirmation for irreversible loss, and offer undo when recovery is possible.A compact button represented by a familiar symbol instead of visible text.
Create an accessible icon-only button for sharing, with a 44 by 44 pixel target, an accessible name, familiar icon, tooltip on hover and focus, and visible hover, pressed and focus states.A button combining a symbol with a visible action label for faster recognition.
Create an accessible button with a leading upload icon and the label Upload files. Treat the icon as decorative, keep the label concise, preserve spacing in right-to-left layouts, and support wrapping rather than truncation.A prominent action that spans its container, often used on compact screens.
Create an accessible full-width primary button for a mobile checkout, with a minimum 44-pixel height, safe-area-aware spacing, a stable loading state, concise label and a sensible maximum width on larger screens.An unavailable action whose appearance and explanation clarify why it cannot run.
Create an unavailable Save button that remains understandable at sufficient contrast, explains what requirement is missing nearby, avoids using disabled state when validation would be clearer, and becomes enabled predictably when the requirement is met.A button that switches one setting or mode between pressed and unpressed states.
Create an accessible Bold toggle button using aria-pressed, a stable accessible name, visually distinct on and off states, keyboard activation, and an icon plus tooltip that does not change the button’s meaning.A stateful icon action that adds or removes an item from a saved collection.
Create an accessible favorite button that toggles aria-pressed, uses a stable Favorite label with announced state, updates its star icon and text without moving focus, persists the choice, and reports save failures.A visually related set of independent actions that affect the same object or task.
Create a labelled button group for Reply, Forward and Archive actions, with consistent sizing, sufficient separation, individual accessible names, visible keyboard focus and responsive wrapping without changing action order.A primary action paired with a separate arrow that opens closely related alternatives.
Create an accessible split button whose main area runs Publish and whose adjacent arrow opens Schedule and Save draft alternatives. Give both controls names, separate focus stops, menu-button semantics and consistent disabled behavior.A prominent action with an attached menu of alternate actions in limited space.
Create a combo button with Create project as the default action and a menu for Create folder and Import project. Keep two keyboard stops, match menu width to the trigger, expose expanded state and restore focus after dismissal.A button that expands or collapses a related section of content.
Create an accessible disclosure button for Advanced settings using aria-expanded and aria-controls, a rotating decorative chevron, no unexpected focus movement, preserved state and correct collapsed content visibility.A compact action that repeats or reapplies the most recent command.
Create an accessible Repeat export action that clearly names what will repeat, prevents duplicate work while running, shows the most recent completion time, reports success or failure, and supports the documented keyboard shortcut.A deliberate press-and-hold control for an unusually high-impact action.
Create a hold-to-confirm control only for a rare high-impact action, with visible progress, pointer and keyboard alternatives, cancellation when released early, reduced-motion support and a conventional confirmation option for assistive technology.A button that communicates an in-progress operation while preventing duplicate activation.
Create an accessible Save changes button that keeps its width while changing to Saving, exposes aria-busy, prevents duplicate submission without removing focus, and resolves to a clear success or retryable error state.A button-triggered menu containing several commands for the same page or object.
Create an accessible Actions menu button with fewer than five concise commands, aria-haspopup and aria-expanded, Enter, Space and arrow-key support, focus on the first item when opened, Escape dismissal and focus restoration.A compact more-actions menu for secondary commands when space is constrained.
Create an accessible overflow action menu for a card with Rename, Duplicate and Delete. Give the icon button a visible or programmatic More actions label, separate the destructive item, support keyboard navigation and return focus on Escape.A menu of commands relevant to the selected item or invocation point.
Create a context menu for a file row that opens by secondary click and Shift plus F10, also exposes an obvious actions-button alternative, positions within the viewport, supports menu keyboard behavior and closes after a command.A menu item that opens a second level of closely related commands.
Create an accessible cascading submenu under Move to, with a visible direction indicator, arrow-key entry and exit, delayed pointer opening, Escape that closes one level at a time, and collision-aware placement.A menu whose independent options can be toggled on or off without closing immediately.
Create an accessible View menu with independent Show grid, Show rulers and Snap to guides menuitemcheckbox options, current checked states, keyboard operation and intentional stay-open behavior after toggling.A menu containing a mutually exclusive set of choices with one current value.
Create an accessible Sort menu using menuitemradio options for Name, Date modified and Size, expose the current choice, support arrow keys and close after selection while updating the trigger label.A longer menu divided into meaningful labelled or separated command sections.
Create an accessible grouped menu that orders frequent actions first, separates sharing commands from file management and danger actions, uses concise labels, keeps the list scannable and provides semantic separators without extra focus stops.A command menu that displays keyboard shortcuts beside frequently used actions.
Create an accessible Edit command menu that shows platform-aware shortcuts for Undo, Redo, Cut, Copy and Paste, preserves readable command names, marks unavailable actions, and never makes shortcuts the only activation method.A persistent desktop-style row of menus for application commands.
Create an ARIA application menubar for File, Edit, View and Help only when native desktop-style command behavior is intended, with roving tabindex, arrow navigation, submenus, character search, Escape handling and complete menuitem semantics.A labelled group of three or more frequent controls for the current content.
Create an accessible labelled toolbar for document actions with one Tab stop, Left and Right Arrow navigation, clear control names, logical groups, visible focus and lower-priority commands moved to overflow at narrow widths.A toolbar of stateful text or object formatting controls.
Create an accessible text-formatting toolbar with Bold, Italic, alignment and text-style controls, roving keyboard focus, aria-pressed for toggles, current-value labels for menu buttons and shortcuts that do not replace visible controls.A contextual command bar that appears when multiple items are selected.
Create a bulk action bar that appears when table rows are selected, announces the selection count, provides Archive, Move and Delete actions, preserves selection while commands run and remains keyboard reachable without shifting the page unexpectedly.A persistent action row that remains available while related content scrolls.
Create a sticky form action bar with Cancel and Save changes, visible separation from scrolling content, safe-area padding, no obstruction of fields or browser controls, responsive stacking and a stable unsaved-change indicator.A prominent circular button floating above content for the screen’s primary action.
Create an accessible floating action button for composing a new message, with one clear primary purpose, a familiar icon plus accessible name, 44-pixel minimum target, safe-edge placement, elevation, tooltip and no overlap with essential content.A floating action that expands into a small set of closely related actions.
Create an accessible speed dial that expands from an Add floating button into no more than four labelled related actions, exposes expanded state, supports keyboard navigation and Escape, respects reduced motion and collapses after selection.Compact commands placed directly beside a list or table item.
Create accessible inline actions for a project row with Edit as the frequent visible action and secondary commands in a labelled overflow menu, keeping row selection separate and revealing the controls on keyboard focus as well as hover.Touch gestures that reveal item commands from behind a list row.
Create mobile swipe actions for Archive and Delete on a message row, with visible button alternatives, one-direction thresholds, cancellation before commitment, undo for destructive actions, screen-reader operability and no conflict with page scrolling.A mobile-friendly bar placing frequent commands near the bottom edge.
Create an accessible mobile bottom action bar for Share, Save and More, with safe-area padding, large labelled targets, one visually prominent primary action, no overlap with system gestures and a responsive desktop toolbar alternative.