• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Button Group

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/buttongroup@3.0.0-beta.5

Variants


Horizontal
Contribution

Show markup
<div class="spectrum-ButtonGroup">
  <button class="spectrum-Button spectrum-Button--secondary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">No, thanks</span>
  </button>
  <button class="spectrum-Button spectrum-Button--secondary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">Remind me later</span>
  </button>
  <button class="spectrum-Button spectrum-Button--primary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">Rate now</span>
  </button>
</div>

Vertical
Contribution

Show markup
<div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
  <button class="spectrum-Button spectrum-Button--secondary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">No, thanks</span>
  </button>
  <button class="spectrum-Button spectrum-Button--secondary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">Remind me later</span>
  </button>
  <button class="spectrum-Button spectrum-Button--primary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">Rate now</span>
  </button>
</div>