Action Bar

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/actionbar@2.0.0

Usage notes#


Floating action bar that appears in selection mode.

Variants#


Standard#
Contribution

Standard Action Bars fill the width of their container.

<div class="spectrum-ActionBar is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <label class="spectrum-Checkbox is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-DashSmall" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">2 Selected</span>
    </label>
    <div class="spectrum-ButtonGroup">
      <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>
</div>

<div class="spectrum-ActionBar is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <label class="spectrum-Checkbox is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-DashSmall" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">4 Selected</span>
    </label>
    <div class="spectrum-ButtonGroup">
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" 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--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" 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--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" 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 is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-DashSmall" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">6 Selected</span>
    </label>
    <div class="spectrum-ButtonGroup">
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
          <use xlink:href="#spectrum-icon-18-Edit"></use>
        </svg>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Copy">
          <use xlink:href="#spectrum-icon-18-Copy"></use>
        </svg>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
          <use xlink:href="#spectrum-icon-18-Delete"></use>
        </svg>
      </button>
    </div>
  </div>
</div>
Show markup

Flexible#
Contribution

Flexible Action Bars fit the width of their content.

<div class="spectrum-ActionBar spectrum-ActionBar--flexible is-open">
  <div class="spectrum-Popover spectrum-ActionBar-popover is-open">
    <label class="spectrum-Checkbox is-indeterminate">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-DashSmall" />
        </svg>
      </span>
      <span class="spectrum-Checkbox-label">228 Selected</span>
    </label>
    <div class="spectrum-ButtonGroup">
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
          <use xlink:href="#spectrum-icon-18-Edit"></use>
        </svg>
      </button>
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="More">
          <use xlink:href="#spectrum-icon-18-More"></use>
        </svg>
      </button>
    </div>
  </div>
</div>
Show markup

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
<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 is-indeterminate">
        <input type="checkbox" class="spectrum-Checkbox-input">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </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-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </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-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </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 is-indeterminate">
          <input type="checkbox" class="spectrum-Checkbox-input">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
            <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-DashSmall" />
            </svg>
          </span>
          <span class="spectrum-Checkbox-label">4 Selected</span>
        </label>
        <div class="spectrum-ButtonGroup">
          <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" 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--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" 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--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" 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>
Show markup