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

Split button

Component status
Contribution
Last releasedDecember 4, 2023
Current version@spectrum-css/splitbutton@7.0.1
View repository
GitHub
View package
npm

Usage notes

Instead of a single split button (now a deprecated component), use a button group to show any additional actions related to the most critical action. Reference Spectrum documentation for more information.

Variants

CTA
Contribution

A CTA split button.



Show markup
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
</div>

<br>
<br>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
</div>

Primary
Contribution

A primary split button.



Show markup
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
</div>

<br>
<br>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
</div>

Secondary
Contribution

A secondary split button.



Show markup
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
</div>

<br>
<br>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
</div>

Migration Guide

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.