• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Button group

Component status
Contribution
Current version@spectrum-css/buttongroup@7.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/buttongroup@8.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Horizontal
Contribution

Default spacing for Medium, Large, and Extra Large t-shirt sizes.

Show markup
<div class="spectrum-ButtonGroup">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">No, thanks</span>
  </button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline 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--fill spectrum-Button--primary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">Rate now</span>
  </button>
</div>

Horizontal - Small
Contribution

Spacing for the Small t-shirt size.

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

Vertical
Contribution

Default spacing for Medium, Large, and Extra Large t-shirt sizes.

Show markup
<div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">No, thanks</span>
  </button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline 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--fill spectrum-Button--primary spectrum-ButtonGroup-item">
    <span class="spectrum-Button-label">Rate now</span>
  </button>
</div>

Vertical - Small
Contribution

Spacing for the Small t-shirt size.

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

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.