Split Button

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/splitbutton@2.0.0

Variants#


CTA#
Contribution

A CTA split button.

<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">Split Button</button>
</div>
Show markup

Primary#
Contribution

A primary split button.

<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

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

Secondary#
Contribution

A secondary split button.

<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

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