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

Button Group

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/buttongroup@3.0.3-alpha.1
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Horizontal
Contribution

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>

Vertical
Contribution

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>

No results found

Try another search term.