Description

A split button groups actions together in a Drop-down Menu, with one primary action and a set of related actions.

Open

Usage & Behavior

General guidelines

Structure

The split button consists of:

• an action area, with a label or icon showing the primary action.

• an arrow icon.

The separator between these two areas signals that they have different actions.

Open

The arrow icon opens an action menu, as a Drop-down Menu.

Content

• The label in the action area should be the primary action.

• The width of the action menu should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.

See the main Buttons information for guidelines on labels.

See Drop-down Menu for the order of options.

Internal Logic

• The action area and the drop-down arrow area are treated as 2 distinct buttons, with their own separate states. For example, they have separate hover states:

• The primary action should also be shown in the action menu.

• The button has 2 modes of operations:

  • Persistent split button - the default action is kept until the user makes a different selection, which then becomes the default.

  • Fixed split button - the primary action is kept as the default, even when the user selects another option.

• The action menu closes when the user makes a selection.

States

Interaction

• Clicking the left-hand action area triggers the primary action.

• Clicking the right-hand drop-down arrow opens an action menu of alternative actions.

• Clicking an action in the Action Menu triggers the related action.

Best practice

Use:

• when there are many possible related actions, but only one primary action.

• if the actions are related but only one of the actions is commonly used.

Don't use:

• as a form element.

• for navigation → use Links.

• when there are a lot of related actions (more than 5 or 6) → consider using an Action Menu.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Code