Also known as:
Button with dropdownDropdownSegmented button

Split Button

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

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.

Visuals

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.

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: