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

Picker button

Component status
Contribution
Current version@spectrum-css/pickerbutton@5.1.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/pickerbutton@6.0.0-s2-foundations.13
ReleasedAugust 26, 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 class="spectrum-PickerButton spectrum-PickerButton--sizeS spectrum-PickerButton--textuiicon spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-PickerButton-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">M</h4>
    <button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-PickerButton-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">L</h4>
    <button class="spectrum-PickerButton spectrum-PickerButton--sizeL spectrum-PickerButton--textuiicon spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown200 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron200" />
        </svg>
      </div>
    </button>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
    <button class="spectrum-PickerButton spectrum-PickerButton--sizeXL spectrum-PickerButton--textuiicon spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown300 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron300" />
        </svg>
      </div>
    </button>
  </div>
</div>

Quiet
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--quiet spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--right" aria-haspopup="listbox">
   <div class="spectrum-PickerButton-fill">
     <span class="spectrum-PickerButton-label is-placeholder">All</span>
     <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
       <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
   </div>
 </button>

Text icon
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--right" aria-haspopup="listbox">
  <div class="spectrum-PickerButton-fill">
    <span class="spectrum-PickerButton-label is-placeholder">All</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </div>
</button>

UI icon only
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--uiicononly spectrum-PickerButton--right" aria-haspopup="listbox" aria-label="Open">
  <div class="spectrum-PickerButton-fill">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </div>
</button>

Custom icon only
Contribution

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

Rounded
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--right spectrum-PickerButton--rounded" aria-haspopup="listbox">
  <div class="spectrum-PickerButton-fill">
    <span class="spectrum-PickerButton-label is-placeholder">All</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </div>
</button>

Open
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--right is-open" aria-haspopup="listbox">
  <div class="spectrum-PickerButton-fill">
    <span class="spectrum-PickerButton-label is-placeholder">All</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </div>
</button>

Disabled
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--right" disabled aria-haspopup="listbox">
  <div class="spectrum-PickerButton-fill">
    <span class="spectrum-PickerButton-label is-placeholder">All</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-PickerButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </div>
</button>

Migration Guide

Picker button uses the Quiet variant instead of loudness levels.

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

  • Use the base class, .spectrum-PickerButton, 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-PickerButton--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.

.spectrum-PickerButton-UIIcon class removed

The .spectrum-PickerButton-UIIcon class no longer matches our naming convention. Both types of icons now use the spectrum-PickerButton-icon class