Action Group

Basic Action Group

<menu class="actions">
  <a href="#" class="button primary">Get Started</a>
  <a href="#" class="button secondary">Learn More</a>
</menu>

Three-Action Group

<menu class="actions">
  <a href="#" class="button primary">Get Started</a>
  <a href="#" class="button secondary">Explore Components</a>
  <a href="#" class="button outline">View on npm ↗</a>
</menu>

With Native Buttons

<menu class="actions">
  <button class="primary">Confirm</button>
  <button class="secondary">Cancel</button>
</menu>

In a Hero Section

<section class="hero">
  <div class="container">
    <h2>Build Better Interfaces</h2>
    <p>Semantic HTML meets beautiful design.</p>
    <menu class="actions">
      <a href="#" class="button primary">Get Started Now</a>
      <a href="#" class="button outline">View on GitHub ↗</a>
    </menu>
  </div>
</section>

Key Features

• Semantic Element — Uses <menu>, the correct HTML5 element for interactive controls
• Single Class — Only action-group class; no modifier utilities needed
• Responsive — Centered flex row on desktop; full-width stacked column on mobile (≤640px)
• Design Tokens — Gap and margin driven by --a-space-m and --a-space-l
• Composable — Works with <a class="button">, <button>, or any inline child

Responsive Behavior

• Desktop — Flex row, centered, with --a-space-m gap between items
• Mobile (≤640px) — Stacks vertically; each child stretches to full width with centered text

Accessibility

• Use <menu> — it is semantically a list of interactive items
• Each child should be a focusable element (<a> or <button>)
• Include descriptive text or aria-label on each action
• Keyboard navigation works natively through standard tab order

Best Practices

• Keep to 2–4 actions; more dilutes focus
• Place the primary action first (leftmost / top on mobile)
• Use the most prominent button variant (primary) for the single most important action
• Avoid nesting action groups inside one another