Split Button

Split buttons let you immediately perform an action or choose additional options from a dropdown.

Also known as:
Button with dropdownDropdownSegmented button

AnchorNeed to know

  • Avoid split buttons where separated buttons and icon buttons will do.
  • Only include related actions in the dropdown.
  • Don’t use links in the dropdown.

UI Kit

To keep in mind

Sometimes there’s not enough space for a separate Button and Icon button, and they both control closely related actions.

  • See Button guidelines.
  • See dropdown guidelines.
  • RTL: the segmented chevron appears on the left.
  • Focus indicator
    • See Interaction states guidelines for focus indicators.
    • On keyboard navigation show a focus indicator around the default action, on the next tab show a focus indicator on the chevron action.
    • For select options show focus indicator on keyboard navigation and on click (not hover)

When to use and when not to use

When to use
  • Use when there’s not enough space for a separate Button and Icon button, and they both control closely related actions.
When not to use
  • Don’t use a button when navigation is involved. Instead, use a link.
  • Don’t use a split button separate Button and Icon Button will do.
  • If there’s only 1 action for the dropdown, try to use another button.

See also


External links

Here are some examples of other existing design systems: