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

Action Bar

Component status
Verified
Last releasedUnreleased
Current version@spectrum-css/actionbar@3.0.3-alpha.1
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">
    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">2 selected</span>
    </label>
    <div class="spectrum-ActionGroup">
      <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">
    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">4 selected</span>
    </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" focusable="false" aria-hidden="true" aria-label="Edit">
          <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" focusable="false" aria-hidden="true" aria-label="Copy">
          <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" focusable="false" aria-hidden="true" aria-label="Delete">
          <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">
    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">6 selected</span>
    </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" focusable="false" aria-hidden="true" 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" focusable="false" aria-hidden="true" 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" focusable="false" aria-hidden="true" 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">
    <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Checkmark100" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Dash100" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">228 selected</span>
    </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" focusable="false" aria-hidden="true" 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" focusable="false" aria-hidden="true" aria-label="More">
          <use xlink:href="#spectrum-icon-18-More"></use>
        </svg>
      </button>
    </div>
  </div>
</div>

Table with ActionBar
Contribution

Example usage within a table.

Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Row Item Frank
Row Item Frank
Row Item Frank
Row Item George
Row Item George
Row Item George
Row Item Henry
Row Item Henry
Row Item Henry
Row Item Jake
Row Item Jake
Row Item Jake
Show markup
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell spectrum-Table-checkboxCell" role="columnheader">
      <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
        <input type="checkbox" class="spectrum-Checkbox-input">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Dash100" />
          </svg>
        </span>
      </label>
    </div>
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 240px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Frank</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Frank</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Frank</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item George</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item George</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item George</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Henry</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Henry</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Henry</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell spectrum-Table-checkboxCell" style="padding-top: 8px; padding-bottom: 8px" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Jake</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Jake</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Jake</div>
    </div>
    <div class="spectrum-ActionBar spectrum-ActionBar--sticky is-open">
      <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM is-indeterminate">
          <input type="checkbox" class="spectrum-Checkbox-input">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
            <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Dash100" />
            </svg>
          </span>
          <span class="spectrum-Checkbox-label">4 selected</span>
        </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" focusable="false" aria-hidden="true" aria-label="Edit">
              <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" focusable="false" aria-hidden="true" aria-label="Copy">
              <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" focusable="false" aria-hidden="true" aria-label="Delete">
              <use xlink:href="#spectrum-icon-18-Delete"></use>
            </svg>
            <span class="spectrum-ActionButton-label">Delete</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Migration Guide

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.

No results found

Try another search term.