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

In-Field Button

Component status
Contribution
Last releasedJune 16, 2022
Current version@spectrum-css/infieldbutton@1.1.9
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--high 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--high 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--high 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--high 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>

Loudness
Contribution

Low

Medium

High

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Low</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--low 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">Medium</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--medium 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">High</h4>
    <button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--high 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--high 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--high 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--high 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--high 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--high 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>

No results found

Try another search term.