Split button

A split button is a multi-function button that allows users to select from several variants of an action. The label describes the most logical variant of the action it performs. Other variants are displayed when the arrow icon is clicked.

Figma component
isInProgress
mainButtonDisabled
popupButtonDisabled
mainButtonTooltip
children
size
variant
statusIcon

When to use it#

Use split buttons to provide users with variants of an action. Make sure the default action is preferred and works well in the majority of situations. Use short descriptions to give more information about variants of the action.

Do
Correct usage of the split button component

When not to use it#

Don’t use a split button to group irrelevant actions together. Consider using:

  • a ghost button with an icon of three vertically arranged dots.
  • a secondary button.
Don't
Incorrect usage of the split button for unrelated actions

How to use it#

Split buttons help reduce visual clutter by grouping variants of a given action together.

Visual representation#

The split button comes in medium size, and it has three variants of visual prominence — primary, secondary, and inverted. The list of actions is displayed either above or below the button, based on the button’s position on the screen. It consists of a label and the description of the action.

Anatomy of the split button component

Alignment#

When using button groups, place the buttons from the left in this order: primary button, secondary button, ghost button.

Prefer the following placement of split buttons:

  • In cards and for empty states, align buttons to the center.
  • In modals and sidebars, align buttons to the left.
  • In cards and on screens in general, place buttons at the top right corner.

Interaction#

Clicking on the label triggers the default action. Clicking on the arrow displays a list of possible variants of the default action. Order the items within the list by popularity. The most popular actions are displayed closest to the split button.

States#

The split button has the following states:

  • Enabled
  • Hover
  • Focus
  • Disabled
  • Loading

Possible states of the split button

Content#

Write the labels of buttons using short action verbs, in imperative, and in First case:

  • Name the action the user performs when they use the button, e.g. “Delete”.
  • Use the verb in the title of the page and in the label of the primary button.
  • Avoid using general labels such as “OK” and “Proceed” for primary buttons.
  • Don’t use pronouns like “you” in button labels.
  • You can use general words for secondary and ghost buttons. They might be adverbs and particles, e.g. in complementary pairs like “Back” or in controls like “Next”.
  • Use an ellipsis “…” for button labels that indicate follow-up actions, such as opening a config page or starting a wizard.
Do
Examples of labels ended by ellipsis
  • Add a short guiding description to the variants of the default action as needed to help users.
© Ataccama 2025Privacy policyAdoption
Cookies help us improve our design system. We use them to collect and store usage statistics under anonymous IDs for analytics purposes. Read our privacy policy for more info.