- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
In-Field Button
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/infieldbutton@2.0.21 |
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-InfieldButton spectrum-InfieldButton--sizeS 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--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--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--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>
QuietContribution
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM spectrum-InfieldButton--quiet 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>
PositionContribution
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--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--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 onlyContribution
Show markup
<button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM 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>
DisabledContribution
Show markup
<button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM 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>
InvalidContribution
Show markup
<button class="spectrum-InfieldButton spectrum-InfieldButton--sizeM 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>
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.