Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Split button

A split button groups related commands together into a list of actions and offers one-click access to a default choice that doesn't require opening the list.

Guidelines

Short description

A split button groups related commands together into a list of actions and offers one-click access to a default choice that doesn't require opening the list.

When and how to use it?

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.

See the split button variations below under "Specification".

Placement

A general rule is to always strive to place buttons in connection to the items they control. Split buttons are often used at the end of flows, which move the user from left to right, therefore the split button should be placed to the right and usually at the bottom of the page or content.

For more information about button placement, see button component.

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.

List when its open

 

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's and don'ts

  • 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.

 

  • Avoid more than one split button in each flow.

Specification

Measurements

Split button measurements

States

Split button states

 

Page last updated

Feedback

Was this helpful?