Action Button

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

Variants#


Standard#
Verified









<button class="spectrum-ActionButton">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

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

<br><br>

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

<br><br>

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

<br><br>

<button class="spectrum-ActionButton">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton is-selected">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>


<button class="spectrum-ActionButton is-selected" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>
Show markup

Quiet#
Verified





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

<br><br>

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

<br><br>

<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" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </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="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </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="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
Show markup