Skip to main content

Split Button

Allows an interaction focal point for multiple actions a user can take. A split button is a dual-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.

Structure​

  • Container: Wraps the content, and allows for a colour style/s to be added.
  • Text: Conveys the action message relevant to the button.
  • Dropdown segment: This interactive area situated inside of the right of the button container indicates a selection of multiple options from a click interaction. This dropdown is rendered using the Context Menu component

Split button

Guidelines​

Split buttons are used when there are many actions available for the user, but not the space or real-estate to have individual buttons for each action.

The split button consists of one button part and one list part. The button part is a default/primary action which is accessible without opening the list of other actions. The list can be clicked to open other actions.

When to use​

  • To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
  • To reduce visual complexity when there are multiple actions a user can take

When not to use​

  • To provide a way to navigate between pages, use an Button Link instead
  • To provide a way to choose between primary and secondary actions, use two different Buttons instead

Size​

Split buttons can be small or large. The default size is small.

Size variants

Behaviour​

The list of secondary actions differs from a dropdown in that each value/choice is its own action, not a "selectable" choice which needs to be confirmed.

The list section is to the right of the action button. The list can be opened above or below the button and may overflow to either side of the button width, based on where the button is placed on the screen or in the flow.

Don't
  • A few secondary options potentially creates layout problems
Do
  • Split buttons resolve layout issues of multiple secondary options

Mobile​

If one button, use the full width of the screen (with margins). The list part of the component (the part containing the chevron) keeps its size, while the button part fills out the width.

When the button’s width fills the screen the list of actions should have the same width.

Do
  • Choose what action is in the first, unopened button based on either it being a "base" variant of several similar actions, or on it being the most commonly used choice by the users.
Don't
  • Avoid more than one split button in each flow.

Content​

TODO

Write content recommendations

Accessibility​

TODO

Add accessibility requirements and considerations.