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

In-Field Button

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/infieldbutton@2.0.21
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Sizing
Contribution

S

M

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-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--right" aria-haspopup="listbox">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--right" aria-haspopup="listbox">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--right" aria-haspopup="listbox">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--right" aria-haspopup="listbox">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>
</div>

Quiet
Contribution

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--right" aria-haspopup="listbox">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>
</div>

Position
Contribution

Start

End

Show markup
<div class="spectrum-Examples" style="justify-content: space-around;">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Start</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--left" aria-haspopup="listbox">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">End</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--right" aria-haspopup="listbox">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>
</div>

Workflow icon only
Contribution

Show markup
<button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--right" aria-haspopup="listbox">
  <div class="spectrum-InfieldButton-fill">
    <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
      <use href="#spectrum-icon-18-Add"></use>
    </svg>
  </div>
</button>

Disabled
Contribution

Show markup
<button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--right" disabled aria-haspopup="listbox">
  <div class="spectrum-InfieldButton-fill">
    <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
      <use href="#spectrum-icon-18-Add"></use>
    </svg>
  </div>
</button>

Invalid
Contribution

Show markup
<button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--right is-invalid" aria-haspopup="listbox">
  <div class="spectrum-InfieldButton-fill">
    <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-InfieldButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
      <use href="#spectrum-icon-18-Add"></use>
    </svg>
  </div>
</button>

Migration Guide

In-Field Button uses the Quiet variant instead of loudness levels.

The Loudness level classes, .spectrum-InfieldButton--low, .spectrum-InfieldButton--medium, and .spectrum-InfieldButton--high, have been removed.

  • Use the base class, .spectrum-InfieldButton, to apply the default button styles. The default styles correspond to what was previously the Loudness - High variant, which used the class .spectrum-InfieldButton--high.
  • Use the modifier class, spectrum-InfieldButton--quiet, to apply the quiet variant styles. Quiet corresponds to what was previously the Loudness - Low variant, which used the class .spectrum-InfieldButton--low class.

The Loudness - Medium variant has been removed, so there is no equivalent.