- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Picker button
Component status | Contribution |
---|---|
Current version | @spectrum-css/pickerbutton@5.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/pickerbutton@6.0.0-s2-foundations.16 |
Released | October 4, 2024 |
Variants
SizingContribution
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>
QuietContribution
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 iconContribution
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 onlyContribution
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 onlyContribution
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>
RoundedContribution
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>
OpenContribution
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>
DisabledContribution
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