Split button

A split button enables users to perform a main action and access relevant, supplementary actions inside a menu.

Example showing a split button.

Use the pattern for actions with multiple associated commands. Users are able to immediately perform the default action and access supplementary actions, which include more specific or less commonly-used actions.

For example, a paste-focused split button could include: 

  • Default action: Paste.
  • Supplementary actions: Keep source formatting, Match destination formatting, Paste text only.

A split button contains:

  1. Main action: the default action a user can take.
  2. Arrow button: contains a chevron-down icon and triggers the menu.
  3. Supplementary actions: lower priority actions displayed in a menu.
Split button showing supplementary actions.
  • Use the segmented button group component as the base structure of the split button.
  • Use the chevron-down icon for the menu trigger.
  • Use a menu component to display supplementary actions for users to take. Set the component's placement prop to "bottom-end" without quotation marks.

You can use CTA buttons, primary buttons and secondary buttons in a split button pattern. See guidance for button options to select the most suitable ones for your application.

Example showing CTA, Primary and Secondary variants of a split button.
Example showing CTA, primary and secondary variants of a split button.
Best practices

Don’t mix the button variants in the same split button.

Include multiple main actions if they have the same importance/priority.

Multiple actions.
Example showing two main actions, Copy and Paste, in a split button.

The main action is represented by an icon-only button to minimize the width of the entire split button.

Icon only.
Example showing the main action represented by an icon with a tooltip.
Best practices
  • Avoid using an icon-only split button if your target audience is unlikely to recognize the proposed icons.
  • Use a textual label if your main action is high priority. This ensures users are more likely to see it.
  • Use a tooltip to describe or label the action.

If you need to expand the pattern or share feedback with us, please contact the team.