- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Quick Actions
| Component status | Contribution |
|---|---|
| Last released | Unreleased |
| Current version | @spectrum-css/quickaction@3.0.3-alpha.1 |
Usage notes
Note that the .spectrum-QuickActions-overlay class should be placed on the container where the Quick Actions are displayed, and the .spectrum-QuickActions--textOnly class should be applied when the buttons have text only.
Variants
StandardVerified
Show markup
<div class="spectrum-QuickActions-overlay" style="padding: 40px;">
<div class="spectrum-QuickActions is-open">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<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">
<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">
<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>
</div>
<div class="spectrum-QuickActions-overlay" style="padding: 40px;">
<div class="spectrum-QuickActions spectrum-QuickActions--textOnly is-open">
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<span class="spectrum-ActionButton-label">Copy</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
<span class="spectrum-ActionButton-label">Delete</span>
</button>
</div>
</div>