Button Group

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

Variants#


Horizontal#
Contribution






<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<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="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br><br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-Tool">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
      <use xlink:href="#spectrum-icon-18-Brush" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>
</div>
Show markup

Vertical#
Contribution


<div style="display: flex; justify-content: space-between; width: 400px;">

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
        <use xlink:href="#spectrum-icon-18-Properties" />
      </svg>
      <span class="spectrum-ActionButton-label">Properties</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Info">
        <use xlink:href="#spectrum-icon-18-Info" />
      <span class="spectrum-ActionButton-label">Info</span>
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="ViewAllTags">
        <use xlink:href="#spectrum-icon-18-ViewAllTags" />
      <span class="spectrum-ActionButton-label">Keywords</span>
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <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" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-Tool">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
        <use xlink:href="#spectrum-icon-18-Brush" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>
  </div>

</div>
Show markup