- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Action group
Component status | Contribution |
---|---|
Current version | @spectrum-css/actiongroup@5.1.2 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/actiongroup@6.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Variants
HorizontalContribution
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>
VerticalContribution
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>
JustifiedContribution
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 SizingContribution
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 SizingContribution
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.