MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

Split Button

A split button combines a primary action button with a menu of secondary actions

Best practice

  • Ensure the main action is the most commonly used action.
  • The actions in the menu should be secondary but related to the main action.
  • Both the main action and the menu items should have concise and descriptive labels.
  • Limit the number of menu items - ideally no more than 4-5.
  • Use the same split button appearance across the product for the same actions.

Usage

A split button helps streamline workflows by offering quick access to the most common action while still providing alternatives.

Use the split button when:

  • There is a clear main action, but users sometimes need other related actions.
  • You want to reduce clutter by grouping related actions.
  • You want to guide users toward a preferred action while still offering flexibility.

Don’t use split button:

  • For actions that are equally important.
  • If the menu has too many options.

Labels

All split buttons should have Labels using English capitalization where we capitalize the first word and also capitalize proper nouns. We do not use ALL CAPS. You can read more about how to write good labels in our Label Guidelines.

Do
Use sentence case for labels.
Use sentence case for labels.
Don't
Don't use ALL CAPS in labels.
Don't use ALL CAPS in labels.

Icons

A split button can contain an icon. By default, the icon is displayed before the label but can be configured to be placed after the label. It is also possible to have an icon-only split button.

Split button with icon.
Split button with icon.
Icon-only split button.
Icon-only split button.

Loading

Like the normal Button the split button has a loading state that should be used for a short indeterminate wait time between 2-5 seconds. The loading state reassures the user that the action is being processed. The loading state also prevents the user from activating or sending something more than one time and thereby reduces mistakes.

Split button in loading state.
Split button in loading state.

The menu list should only contain actions that are related to the main action and should not contain too many actions. Don’t repeat the main action in the menu list.

Do
Only add related actions to the menu.
Only add related actions to the menu.
Don't
Don't repeat the main action in the menu.
Don't repeat the main action in the menu.

Variants and appearances

Like the normal button, the split button comes in three variants - filled, outlined and plain. Each variant has the following appearances: primary, secondary, neutral, inverse and error.

For more information on button variants and appearances and how to use them, please read our Button Documentation.

Placement

The split button can be placed in many difference areas of the UI and be use for many different purposes. For example, you can use the plain split button next to other plain buttons to create a text editing toolbar.

Create a toolbar using the plain variant split button alongside other plain buttons.
Create a toolbar using the plain variant split button alongside other plain buttons.

Accessibility

The split button supports users with assistive technology in both interacting with and understanding the component.

The following describes how to navigate the split button using a keyboard:

  • Navigate to the component using the TAB-key.
  • Navigate from the main action to the menu using TAB-key.
  • Open the menu by pressing ENTER or SPACE.
  • Navigate into the menu list using the TAB-key.
  • Navigate up and down the list using the ARROW-DOWN and ARROW-UP.
  • Close the menu by pressing ESCAPE.