Tool

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/button@2.0.0

Usage notes#


The tool button.

Variants#


Standard#
Verified



<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="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
</button>

<button class="spectrum-Tool" disabled>
  <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" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
    <use xlink:href="#spectrum-icon-18-Brush" />
  </svg>
</button>

<br><br>

<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>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-Tool-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

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

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

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