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.

Open

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:

Open

Open

• 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

	Regular	Enter

	Regular	Enter
Regular	Open	Open
Hover	Open   Open	Open Open
Active	Open   Open	Open Open
Disabled	Open	Open
Focused	Open   Open	Open Open
Focused, Hover	Open   Open	Open Open
Focused, Active	Open   Open	Open Open

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

Zeplin link	Screen thumbnail

Zeplin link	Screen thumbnail
https://zpl.io/Q0Alg9n
https://zpl.io/vMgvGOY

Code