Split Button

A Split Button offers a default action paired with a secondary action to reveal alternate or related actions.

Preview

Usage

This dual-functionality allows for surfacing variations of the default action. It conserves space in the interface and reduces cognitive load. While versatile, they should be used judiciously to avoid overwhelming users or cluttering the UI.

In addition to the Button component's documentation:

The default button supports text or icons, while the secondary action is always an icon.
The secondary action selected from its menu replaces the primary action.
Ensure that primary and secondary actions are clearly labeled to avoid user confusion.

Do

Use Split Buttons when you need to offer a default action paired with closely related actions, such as "Save" with secondary actions like "Save as Draft" or “Save all.”
Reserve for scenarios where multiple related actions can reasonably be grouped within the same context via the secondary action.

Don’t

Avoid using if the secondary action is unrelated or distantly related.
Refrain from grouping multiple Split Buttons together, as this can lead to a cluttered and confusing interface.

Variants

Base

Danger

Positive

Inverted

Muted

Disabled

Use the disabled prop to disable both buttons, or use alpha-disabled and omega-disabled to disable each button independently.

Active

Sizes

<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--primary d-btn--xs d-split-btn__alpha d-split-btn__alpha--xs" type="button">
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--primary d-btn--xs d-btn--icon-only d-split-btn__omega d-split-btn__omega--xs" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>
<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--primary d-btn--sm d-split-btn__alpha d-split-btn__alpha--sm" type="button">
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--primary d-btn--sm d-btn--icon-only d-split-btn__omega d-split-btn__omega--sm" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>
<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--primary d-split-btn__alpha d-split-btn__alpha--md" type="button">
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--primary d-btn--icon-only d-split-btn__omega d-split-btn__omega--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>
<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--primary d-btn--lg d-split-btn__alpha d-split-btn__alpha--lg" type="button">
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--primary d-btn--lg d-btn--icon-only d-split-btn__omega d-split-btn__omega--lg" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>
<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--primary d-btn--xl d-split-btn__alpha d-split-btn__alpha--xl" type="button">
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--primary d-btn--xl d-btn--icon-only d-split-btn__omega d-split-btn__omega--xl" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>

Loading

Icon Support

Icon and Label

<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--outlined d-split-btn__alpha d-split-btn__alpha--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">
      <svg class="d-icon--size-300 d-icon">...</svg>
    </span>
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--outlined d-btn--icon-only d-split-btn__omega d-split-btn__omega--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>
<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--outlined d-split-btn__alpha d-split-btn__alpha--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--top">
      <svg class="d-icon--size-300 d-icon">...</svg>
    </span>
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--outlined d-btn--icon-only d-split-btn__omega d-split-btn__omega--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>
<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--outlined d-split-btn__alpha d-split-btn__alpha--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--right">
      <svg class="d-icon--size-300 d-icon">...</svg>
    </span>
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--outlined d-btn--icon-only d-split-btn__omega d-split-btn__omega--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>
<span class="d-split-btn">
  <button class="base-button__button d-btn d-btn--outlined d-split-btn__alpha d-split-btn__alpha--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--bottom">
      <svg class="d-icon--size-300 d-icon">...</svg>
    </span>
    <span class="d-btn__label base-button__label"> Place Call </span>
  </button>
  <button class="base-button__button d-btn d-btn--outlined d-btn--icon-only d-split-btn__omega d-split-btn__omega--md" type="button">
    <span class="base-button__icon d-btn__icon d-btn__icon--left">...</span>
  </button>
</span>

Icon Only

Vue API

Slots

Name	Description
alphaIcon	Alpha (left) button icon slot
default	Default content slot
dropdownList	Built-in dropdown content slot, use of dt-list-item is highly recommended here.
omega	Omega (right) content slot, overrides omega button styling and functionality completely
omegaIcon	Omega (right) button icon slot

Props

Name	Description	Default
alphaActive	Determines whether the alpha button should have active styling Type: boolean Values: truefalse	false
alphaAriaLabel	Descriptive label for the alpha button Type: string	null
alphaDisabled	HTML button disabled attribute for alpha button only (Reference) Type: boolean Values: truefalse	false
alphaIconPosition	The position of the icon slot within the alpha button. Type: string Values: leftrighttopbottom	'left'
alphaLabelClass	Used to customize the alpha label container Type: string\|array\|object	''
alphaLoading	Whether the alpha button should display a loading animation or not. Type: boolean Values: truefalse	false
alphaTooltipText	Text shown in tooltip when you hover the alpha button, required if no content is passed to default slot Type: string	undefined
assertiveOnFocus	Determines whether a screenreader reads live updates of the button content to the user while the button is in focus. Type: boolean Values: truefalse	false
disabled	HTML button disabled attribute for both buttons. Use alphaDisabled or omegaDisabled to disable buttons individually. (Reference) Type: boolean Values: truefalse	false
dropdownPlacement	The direction the dropdown displays relative to the anchor. Type: string Values: toptop-starttop-endrightright-startright-endleftleft-startleft-endbottombottom-startbottom-endautoauto-startauto-end	'bottom-end'
importance	The fill and outline of the button associated with its visual importance. Type: string Values: clearoutlinedprimary	'primary'
kind	The color of the button. Type: string Values: defaultmuteddangerinverted	'default'
omegaActive	Determines whether the omega button should have active styling Type: boolean Values: truefalse	false
omegaAriaLabel	Descriptive label for the omega button Type: string	null
omegaDisabled	HTML button disabled attribute for omega button only (Reference) Type: boolean Values: truefalse	false
omegaId	Element ID, useful in case you need to reference the button as an external anchor for popover. Type: string	undefined
omegaTooltipText	Text shown in tooltip when you hover the omega button, required as it is an icon only button Type: string	undefined
rootClass	Additional class name for the root element. Can accept all of: String, Object, and Array, i.e. has the same api as Vue's built-in handling of the class attribute. Type: string\|object\|array	''
size	The size of the button. Type: string Values: xssmmdlgxl	'md'
width	Button width, accepts CSS width attribute values Type: string	null

Events

Name	Description
alpha-clicked	Native alpha button click event Type: PointerEvent \| KeyboardEvent
omega-clicked	Native omega button click event Type: PointerEvent \| KeyboardEvent

Accessibility

In addition to the Button component's accessibility documentation:

An icon-only primary action and the secondary action require a Tooltip to indicate its function.
While the secondary action is focused, pressing Enter or Space triggers its action, displaying a Dropdown component or Popover component.

Classes

Class	Applies to	Description

Preview

Usage #

Do

Don’t

Variants #

Base #

Danger #

Positive #

Inverted #

Muted #

Disabled #

Active #

Sizes #

Loading #

Icon Support #

Icon and Label #

Icon Only #

Vue API #

Slots

Props

Events

Accessibility #

Classes #

Usage

Variants

Base

Danger

Positive

Inverted

Muted

Disabled

Active

Sizes

Loading

Icon Support

Icon and Label

Icon Only

Vue API

Accessibility

Classes