Usage & Behaviour

General guidelines

Text

See guidelines in Buttons#Labels

Format structure

The split button is separated into two areas: the label/icon and the arrow icon. The separator between them signals that the two areas result in different actions. 

The icon which opens the menu act as a menu (see more information in <<menu link>>)

Order

For the items within the menu

• Popularity - when there are a few available items (e.g. less than 5)
• Alphabetically - when 

Internal Logic

• When you click the primary action on the left, the action is activated.
• When you click the arrow, it exposes a menu alternative actions. 
• The primary button should appear in the menu and indicated as selected

Default Selection

The primary action should be the most common use case, while the dropdown menu shows a list of related actions. 

Persistent split button <<?Can the default be changed - according to the menu?>>

States

• Split buttons can be enabled or disabled
  • The menu can also contain specific disabled actions while the Primary is enable and vice versa
• If a split button is disabled, the colour of the button changes and the cursor indicates that you cannot click the split button

Interaction

If the split button is selected using keyboard actions and then Enter is presses, the primary action occurs.

Clicking/tapping the label area triggers one of two types of behaviour: (Do we want to enable both types????)

• It triggers the default action.
• It triggers the last action chosen by the user. Initially, it is the default action until the user makes a different selection which then becomes default. The button label changes accordingly. The button has a fixed size and truncates the text if the menu item is longer (as with the combo box).

Best practice

• This pattern is used when there are many possible actions but only one primary action
• Use a split button only if the actions are related and only one of the actions in commonly used
• Typically placed in a main toolbar
• Use for actions not navigation

Design