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

In-field button

Component status
Contribution
Current version@spectrum-css/infieldbutton@5.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/infieldbutton@6.0.0-s2-foundations.14
ReleasedSeptember 12, 2024
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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--right" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--right" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeM spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--right" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeL spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--right" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeXL spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet spectrum-InfieldButton--right" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeM spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--left" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeM spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--right" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeM spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use href="#spectrum-icon-18-Add"></use>
        </svg>
      </div>
    </button>
  </div>
</div>

Disabled
Contribution

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

Stacked
Contribution

M

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </button>
  </div>
</button>

Stacked
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 type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--top" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp50 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron50" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeS spectrum-InfieldButton--bottom" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown50 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron50" />
        </svg>
      </div>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--top" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron75" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--bottom" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron75" />
        </svg>
      </div>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--top" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp100 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeL spectrum-InfieldButton--bottom" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100" />
        </svg>
      </div>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--top" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronUp200 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron200" />
          </svg>
      </div>
    </button>
    <button type="button" class="spectrum-InfieldButton spectrum-InfieldButton--sizeXL spectrum-InfieldButton--bottom" aria-haspopup="listbox" aria-label="Add">
      <div class="spectrum-InfieldButton-fill">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown200 spectrum-InfieldButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron200" />
        </svg>
      </div>
    </button>
  </div>
</div>

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.

Stacked in-field buttons

In order to create the stacked In-field buttons, give the first button a class of spectrum-InfieldButton--top and the second a class of spectrum-InfieldButton--bottom