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

Button - Negative

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/button@4.0.0-alpha.0
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

The negative button is for high emphasis of negative or destructive actions.

Variants

Sizing
Verified

S

M (default)

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeS">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeS">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeM">
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeL">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeL">
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeXL">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeXL">
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>
</div>

Standard - Disabled
Verified

Show markup
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative" disabled>
  <span class="spectrum-Button-label">Delete</span>
</button>

<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
    <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>
  <span class="spectrum-Button-label">Delete</span>
</button>

Negative (quiet)
Verified

S

M (default)

L

XL

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeS">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeS">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeM">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeM">
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeL">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeL">
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeXL">
      <span class="spectrum-Button-label">Delete</span>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--quiet spectrum-Button--sizeXL">
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
      <span class="spectrum-Button-label">Delete</span>
    </button>
  </div>
</div>

Negative (quiet) - Disabled
Verified

Show markup
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--negative spectrum-Button--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>
  <span class="spectrum-Button-label">Delete</span>
</button>

Migration Guide

T-shirt sizing

Button now supports t-shirt sizing and requires that you specify the size of button by adding a .spectrum-Button--size* class.

Change workflow icon size

Previously, all Buttons used .spectrum-Icon--sizeS. This has changed:

Button classname Workflow icon classname
.spectrum-Button--sizeS .spectrum-Icon--sizeS
.spectrum-Button--sizeM .spectrum-Icon--sizeM
.spectrum-Button--sizeL .spectrum-Icon--sizeL
.spectrum-Button--sizeXL .spectrum-Icon--sizeXL

No results found

Try another search term.