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

Button - Primary

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/button@3.0.0-beta.5

Usage notes


The primary button is used for medium emphasis.

Variants


Primary
Verified



Button Button



Edit Edit
Show markup
<button class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

<br><br>

<a role="button" href="#" class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</a>

<a role="button" class="spectrum-Button spectrum-Button--primary is-disabled">
  <span class="spectrum-Button-label">Button</span>
</a>

<br><br>

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

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

<br><br>

<a class="spectrum-Button spectrum-Button--primary">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

<a class="spectrum-Button spectrum-Button--primary is-disabled">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

Primary (quiet)
Verified

Show markup
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Migration Guide


Change workflow icon size to medium

Replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.