• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Button - pending

Component status
Contribution
Current version@spectrum-css/button@12.0.2
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

The pending button is for indicating that a quick progress action is taking place. In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress. We recommend the use of the .is-pending class on the component’s parent container, but there is also an option to use an attribute of pending instead. Buttons should have the disabled attribute when the pending state is applied.

Variants

Default (accent, negative, primary, and secondary)
Contribution

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--fill spectrum-Button--accent spectrum-Button--sizeS is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly spectrum-Button--sizeS is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </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--fill spectrum-Button--negative spectrum-Button--sizeM is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeM is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </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--fill spectrum-Button--primary spectrum-Button--sizeL is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--iconOnly spectrum-Button--sizeL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </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--fill spectrum-Button--secondary spectrum-Button--sizeXL is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeXL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--iconOnly spectrum-Button--sizeXL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>
  </div>
</div>

Outline (accent, negative, primary, and secondary)
Contribution

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--accent spectrum-Button--outline spectrum-Button--sizeS is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--accent spectrum-Button--outline spectrum-Button--sizeS is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--accent spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeS is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </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--outline spectrum-Button--sizeM is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline spectrum-Button--sizeM is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </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--outline spectrum-Button--sizeL is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--outline spectrum-Button--sizeL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </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--secondary spectrum-Button--outline spectrum-Button--sizeXL is-pending" disabled>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--outline spectrum-Button--sizeXL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <span class="spectrum-Button-label">Edit</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>

    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeXL is-pending" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
        <div class="spectrum-ProgressCircle-track"></div>
        <div class="spectrum-ProgressCircle-fills">
          <div class="spectrum-ProgressCircle-fillMask1">
            <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </button>
  </div>
</div>

Static white
Contribution

Pending button state is only supported for static white, not for static black.

S

M (default)

L

XL

Show markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
  <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--fill spectrum-Button--staticWhite spectrum-Button--sizeS is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeS is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly spectrum-Button--sizeS is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </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--fill spectrum-Button--staticWhite spectrum-Button--sizeM is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeM is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </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--fill spectrum-Button--staticWhite spectrum-Button--sizeL is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly spectrum-Button--sizeL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </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--fill spectrum-Button--staticWhite spectrum-Button--sizeXL is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeXL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly spectrum-Button--sizeXL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>
    </div>
  </div>
</div>

Outline on Static White
Contribution

Pending button state is only supported for static white, not for static black.

S

M (default)

L

XL

Show markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
  <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--staticWhite spectrum-Button--outline spectrum-Button--sizeS is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--sizeS is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeS is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </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--staticWhite spectrum-Button--outline spectrum-Button--sizeM is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--sizeM is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </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--staticWhite spectrum-Button--outline spectrum-Button--sizeL is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--sizeL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </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--staticWhite spectrum-Button--outline spectrum-Button--sizeXL is-pending" disabled>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--sizeXL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <span class="spectrum-Button-label">Edit</span>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>

      <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeXL is-pending" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Edit" />
        </svg>
        <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
            <div class="spectrum-ProgressCircle-fillMask2">
              <div class="spectrum-ProgressCircle-fillSubMask2">
                <div class="spectrum-ProgressCircle-fill"></div>
              </div>
            </div>
          </div>
        </div>
      </button>
    </div>
  </div>
</div>