Action bar

Component status	Contribution
Current version	@spectrum-css/actionbar@8.1.2
Released	August 29, 2024
S2-foundations	@spectrum-css/actionbar@9.0.0-s2-foundations.13
Released	August 8, 2024

View guidelines

Spectrum website

View repository

GitHub

View package

npm

Usage notes

Floating Action bar that appears in selection mode.

Variants

Standard
Contribution

Standard Action bars fill the width of their container.

Show markup

<div class="spectrum-ActionBar is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM" aria-label="Clear selection">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>

    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">2 Selected</label>

    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeM">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
</div>

<div class="spectrum-ActionBar is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM" aria-label="Clear selection">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>

    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">2 Selected</label>

    <div class="spectrum-ActionGroup 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-label="Edit" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit"></use>
        </svg>
        <span class="spectrum-ActionButton-label">Edit</span>
      </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-label="Copy" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Copy"></use>
        </svg>
        <span class="spectrum-ActionButton-label">Copy</span>
      </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-label="Delete" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Delete"></use>
        </svg>
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
</div>

<div class="spectrum-ActionBar is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM" aria-label="Clear selection">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>

    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">2 Selected</label>

    <div class="spectrum-ActionGroup 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-label="Edit">
          <use xlink:href="#spectrum-icon-18-Edit"></use>
        </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-label="Copy">
          <use xlink:href="#spectrum-icon-18-Copy"></use>
        </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-label="Delete">
          <use xlink:href="#spectrum-icon-18-Delete"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Emphasized
Contribution

Emphasized Action bar.

Show markup

<div class="spectrum-ActionBar spectrum-ActionBar--emphasized is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="Clear selection">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>

    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">2 Selected</label>

    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeM">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
</div>


<div class="spectrum-ActionBar spectrum-ActionBar--emphasized is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="Clear selection">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>

    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">2 Selected</label>

    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeM">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-label="Edit" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit"></use>
        </svg>
        <span class="spectrum-ActionButton-label">Edit</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-label="Copy" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Copy"></use>
        </svg>
        <span class="spectrum-ActionButton-label">Copy</span>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-label="Delete" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Delete"></use>
        </svg>
        <span class="spectrum-ActionButton-label">Delete</span>
      </button>
    </div>
  </div>
</div>


<div class="spectrum-ActionBar spectrum-ActionBar--emphasized is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="Clear selection">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>

    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">2 Selected</label>

    <div class="spectrum-ActionGroup spectrum-ActionGroup--sizeM">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-label="Edit">
          <use xlink:href="#spectrum-icon-18-Edit"></use>
        </svg>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-label="Copy">
          <use xlink:href="#spectrum-icon-18-Copy"></use>
        </svg>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-ActionButton--staticWhite spectrum-ActionGroup-item">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon" focusable="false" aria-label="Delete">
          <use xlink:href="#spectrum-icon-18-Delete"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Flexible
Contribution

Flexible Action bars fit the width of their content.

Show markup

<div class="spectrum-ActionBar spectrum-ActionBar--flexible is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <button class="spectrum-CloseButton spectrum-CloseButton--sizeM" aria-label="Clear selection">
      <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </button>

    <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">2 Selected</label>

    <div class="spectrum-ActionGroup 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-label="Edit">
          <use xlink:href="#spectrum-icon-18-Edit"></use>
        </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-label="More">
          <use xlink:href="#spectrum-icon-18-More"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Sticky
Contribution

This example shows how the sticky Action bar looks within a scrollable element. Please see usage section of the guidelines for more information about using Action bar with underlying content.

Scroll down to view sticky behavior

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Show markup

<section style="position: relative; max-height: 8em; overflow: auto;">
  <h4>Scroll down to view sticky behavior</h4>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
      in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.
  </p>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <div class="spectrum-ActionBar spectrum-ActionBar--sticky is-open">
    <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
      <button class="spectrum-CloseButton spectrum-CloseButton--sizeM" aria-label="Clear selection">
        <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross100" />
        </svg>
      </button>

      <label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">3 Selected</label>

      <div class="spectrum-ActionGroup">
        <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-label="Edit" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-Edit"></use>
          </svg>
          <span class="spectrum-ActionButton-label">Edit</span>
        </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-label="Copy" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-Copy"></use>
          </svg>
          <span class="spectrum-ActionButton-label">Copy</span>
        </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-label="Delete" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-Delete"></use>
          </svg>
          <span class="spectrum-ActionButton-label">Delete</span>
        </button>
      </div>
    </div>
  </div>
</section>

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

Popover Dependency

Action bar requires Popover, which is nested within Action bar. Action bar background, border, and corner radius are applied to the nested Popover component and can be overriden by Action bar.

Action bar close button

Checkbox has been replaced by Close button.

Item counter

Item counter has replaced the checkbox field label. Item counter is a Field Label component.

New Action button markup

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

Emphasized Action bar requires .spectrum-ActionButton-staticWhite class on Action button.

New ActionGroup markup

Action bar now uses the new ActionGroup markup. Replace .spectrum-ButtonGroup with .spectrum-ActionGroup and apply .spectrum-ActionGroup-item to each action button. See the Action Group for more information.

Change workflow icon size to medium

If you use icon action button in your markup, please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.

Spectrum CSS

StandardContribution

EmphasizedContribution

FlexibleContribution

StickyContribution

Scroll down to view sticky behavior

Standard
Contribution

Emphasized
Contribution

Flexible
Contribution

Sticky
Contribution