• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Action group

Component status
Contribution
Current version@spectrum-css/actiongroup@5.1.1
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/actiongroup@6.0.0-s2-foundations.12
ReleasedAugust 2, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Horizontal
Contribution

Show markup
<div class="spectrum-ActionGroup spectrum-ActionGroup--sizeM">
  <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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM">
  <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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM">
  <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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM">
  <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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionButton-icon" 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 spectrum-ActionGroup--sizeM" style="width: 300px">
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View card">
      <use xlink:href="#spectrum-icon-18-AlignTop" />
    </svg>
    <span class="spectrum-ActionButton-label">Align Top</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionGroup-item">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-hidden="true" aria-label="View list">
      <use xlink:href="#spectrum-icon-18-AlignBottom" />
    </svg>
    <span class="spectrum-ActionButton-label">Align Bottom</span>
  </button>
</div>

Justified (icon-only)
Contribution

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

Justified (compact, icon-only)
Contribution

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

Horizontal Sizing
Contribution

XS

S

M

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XS</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeXS">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeS">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeM">
      <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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeL">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeL spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeXL">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
</div>

Vertical Sizing
Contribution

XS

S

M

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XS</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--sizeXS">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXS spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--sizeS">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeS spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--sizeM">
      <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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--sizeL">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeL spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--sizeXL">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeXL spectrum-ActionGroup-item is-selected">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

New Action Button markup

Action Button requires .spectrum-ActionButton-icon class on icons nested inside of Action Button.

Change workflow icon size to medium

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

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.