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

Picker Button

Component status
Contribution
Last releasedJune 16, 2022
Current version@spectrum-css/pickerbutton@1.1.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-PickerButton spectrum-PickerButton--sizeS spectrum-PickerButton--textuiicon spectrum-PickerButton--high spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown100" 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">M</h4>
    <button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--high spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown200" 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">L</h4>
    <button class="spectrum-PickerButton spectrum-PickerButton--sizeL spectrum-PickerButton--textuiicon spectrum-PickerButton--high spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown300" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron300" />
        </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--high spectrum-PickerButton--right" aria-haspopup="listbox">
      <div class="spectrum-PickerButton-fill">
        <span class="spectrum-PickerButton-label is-placeholder">All</span>
        <svg class="spectrum-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown400" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron400" />
        </svg>
      </div>
    </button>
  </div>
</div>

Text icon
Contribution

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

UI icon only
Contribution

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

Workflow icon only
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--icononly spectrum-PickerButton--high spectrum-PickerButton--right" aria-haspopup="listbox">
  <div class="spectrum-PickerButton-fill">
    <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-PickerButton-icon" focusable="false" aria-hidden="true" aria-label="Add">
      <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--high 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-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown200" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron200" />
    </svg>
  </div>
</button>

Open
Contribution

Show markup
<button class="spectrum-PickerButton spectrum-PickerButton--sizeM spectrum-PickerButton--textuiicon spectrum-PickerButton--high 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-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown200" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron200" />
    </svg>
  </div>
</button>

Disabled
Contribution

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

Invalid
Contribution

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

No results found

Try another search term.