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

Quick actions

Deprecated component

This component has been deprecated.

Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.

Component status
Deprecated
Last published@spectrum-css/quickaction@3.1.1
ReleasedFebruary 6, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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

Standard
Contribution

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>