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

Quick Actions

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/quickaction@3.0.0-beta.5

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
Verified

Show markup
<div class="spectrum-QuickActions-overlay" style="padding: 40px;">

  <div class="spectrum-QuickActions is-open">
    <button class="spectrum-ActionButton 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--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--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--quiet">
      <span class="spectrum-ActionButton-label">Edit</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Copy</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Delete</span>
    </button>
  </div>

</div>