Quick Actions - Everyday Interface Patterns

A static quick action group shows Add task, Invite teammate, and Open settings buttons with no routing, task API, invitation service, or settings route.

Program

Quick action groups should provide clear button labels and a readable group name without wiring routes or services.

quick_action_group.html

Visuals: captured from real browser rendering

<section class="quick-actions" aria-labelledby="quick-actions-title">
  <h2 id="quick-actions-title">Quick actions</h2>
  <div class="actions" role="group" aria-labelledby="quick-actions-title">
    <button type="button">Add task</button>
    <button type="button">Invite teammate</button>
    <button type="button">Open settings</button>
  </div>
  <p class="note">Static action group only; no task API, invitation service, settings route, storage, or analytics runs.</p>
</section>
<style>
  .quick-actions { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .actions button { padding: 8px 12px; }
  .quick-actions p, .note { margin: 0; }
  .note { color: #475569; }
</style>

Label the quick actions section.
The section is labelled by its visible heading.
Group the action buttons.
The buttons are exposed as one labelled group.
Show the task action.
The button label is visible and exact.
Show the invite action.
The button label is visible and exact.
Show the settings action.
The button label is visible and exact.
Check quick action honesty.
Three labelled buttons and no services or routes.

group heading The heading names the quick action group.

clear labels Each button has visible action text.

no routes or APIs The lesson should not imply task APIs, invitation services, settings routes, storage, or analytics.