• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Action Group

Component status
Verified
Last releasedUnreleased
Current version@spectrum-css/actiongroup@1.0.3-alpha.1
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Horizontal
Contribution

Show markup
<div class="spectrum-ActionGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Edit</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Copy</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <span class="spectrum-ActionButton-label">Delete</span>
  </button>
</div>

Horizontal (icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Horizontal (quiet, icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Horizontal (compact)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--compact">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Edit</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Copy</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <span class="spectrum-ActionButton-label">Delete</span>
  </button>
</div>

Horizontal (compact, icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--compact">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Horizontal (compact, quiet, icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--compact spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Vertical
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--vertical">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Edit</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Copy</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <span class="spectrum-ActionButton-label">Delete</span>
  </button>
</div>

Vertical (icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--vertical">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Vertical (icon-only, quiet)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Vertical (compact)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Edit</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <span class="spectrum-ActionButton-label">Copy</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <span class="spectrum-ActionButton-label">Delete</span>
  </button>
</div>

Vertical (compact, icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Vertical (icon-only, compact, quiet)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact spectrum-ActionGroup--quiet">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
      <use xlink:href="#spectrum-icon-18-Edit" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Copy">
      <use xlink:href="#spectrum-icon-18-Copy" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

Justified
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--justified" style="width: 300px">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View card">
      <use xlink:href="#spectrum-icon-18-ViewCard" />
    </svg>
    <span class="spectrum-ActionButton-label">Card View</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View list">
      <use xlink:href="#spectrum-icon-18-ViewList" />
    </svg>
    <span class="spectrum-ActionButton-label">List View</span>
  </button>
</div>

Justified (icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--justified" style="width: 300px">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View card">
      <use xlink:href="#spectrum-icon-18-ViewCard" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View list">
      <use xlink:href="#spectrum-icon-18-ViewList" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View grid">
      <use xlink:href="#spectrum-icon-18-ViewGrid" />
    </svg>
  </button>
</div>

Justified (compact, icon-only)
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--compact spectrum-ActionGroup--justified" style="width: 300px">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View card">
      <use xlink:href="#spectrum-icon-18-ViewCard" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View list">
      <use xlink:href="#spectrum-icon-18-ViewList" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="View grid">
      <use xlink:href="#spectrum-icon-18-ViewGrid" />
    </svg>
  </button>
</div>

Migration Guide

Change workflow icon size to medium

Replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.