- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Button Group
Component status | Contribution |
---|---|
Last released | Unreleased |
Current version | @spectrum-css/buttongroup@3.0.3-alpha.1 |
Variants
HorizontalContribution
Show markup
<div class="spectrum-ButtonGroup">
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item">
<span class="spectrum-Button-label">No, thanks</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item">
<span class="spectrum-Button-label">Remind me later</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-ButtonGroup-item">
<span class="spectrum-Button-label">Rate now</span>
</button>
</div>
VerticalContribution
Show markup
<div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item">
<span class="spectrum-Button-label">No, thanks</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary spectrum-ButtonGroup-item">
<span class="spectrum-Button-label">Remind me later</span>
</button>
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--primary spectrum-ButtonGroup-item">
<span class="spectrum-Button-label">Rate now</span>
</button>
</div>