name: Button - Primary
status: Verified
description: The primary button is used for medium emphasis.
SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Primary
sections:
  - name: Migration Guide
    description: |
      ### 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`          |
examples:
  - id: button-primary
    name: Sizing
    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--primary spectrum-Button--sizeS">
            <span class="spectrum-Button-label">Edit</span>
          </button>

          <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeS">
            <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-Button-label">Edit</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--primary spectrum-Button--sizeM">
            <span class="spectrum-Button-label">Edit</span>
          </button>

          <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeM">
            <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>
        </div>

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

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

          <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeL">
            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
              <use xlink:href="#spectrum-icon-18-Edit" />
            </svg>
            <span class="spectrum-Button-label">Edit</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--primary spectrum-Button--sizeXL">
            <span class="spectrum-Button-label">Edit</span>
          </button>

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

  - id: button-primary
    name: Standard - Disabled
    markup: |
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary" disabled>
        <span class="spectrum-Button-label">Edit</span>
      </button>

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

  - id: button-quiet-primary
    name: Primary (quiet)
    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--primary spectrum-Button--quiet spectrum-Button--sizeS">
            <span class="spectrum-Button-label">Edit</span>
          </button>

          <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeS">
            <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-Button-label">Edit</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--primary spectrum-Button--quiet spectrum-Button--sizeM">
            <span class="spectrum-Button-label">Edit</span>
          </button>

          <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeM">
            <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>
        </div>

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

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

          <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Button--sizeL">
            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
              <use xlink:href="#spectrum-icon-18-Edit" />
            </svg>
            <span class="spectrum-Button-label">Edit</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--primary spectrum-Button--quiet spectrum-Button--sizeXL">
            <span class="spectrum-Button-label">Edit</span>
          </button>

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

  - id: button-quiet-primary
    name: Primary (quiet) - Disabled
    markup: |
      <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-Button--quiet" disabled>
        <span class="spectrum-Button-label">Button</span>
      </button>

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