When users need to make a selection and then an immediate related choice, we can use the split button. We used to call these combo buttons, and they’re actually composed of two buttons: the left one is the default option (the most commonly used selection), and the right one (the arrow) shows the available related options.
We use the split button to help users initiate an action and then make the related secondary or tertiary choice they need to make next.
With a split button, users have a choice of multiple actions (2 or more) and one of those choices is the primary action.
Example: For an invoice, the primary action is “Save,” and the related actions might be “Save and close” and “Save and create new.”
Appearance and behavior
The split button is composed of two side-by-side buttons.
The left button is the default action (the most commonly used one).
The arrow on the right opens a menu with other related actions.
In the standard interaction, the primary action always remains the same, regardless of what the user selects, and it does not appear again in the list.
In a variation on that standard, the action that the user selected last is remembered and populated as the primary one. Use this variation where it makes sense (for example, when users are likely to choose the action that was last selected).
Menu up or down
The default state is for the menu to open downward.
When the button is close to the bottom of the screen. the menu will open upward.
Split buttons don’t exist on mobile devices because of the need for clear tap targets. In these cases, we recommend using a menu button with a more generic label.
Content guidelines for split buttons
When possible, use verb-noun combinations, like Create invoice.
If the related options supplement the default option, you can use a verb to start the default option and nouns for the related options. For example: “Create new” / “Bill,” “Expense,” and “Check.”
If the related options are parallel to the default action, you can use verbs to start both the default option and the related options. Examples: Preview payroll and Save for later.
Set labels in sentence case. Examples: Create invoice, Send reminder
Use title case for proper nouns. Examples: Bank of America, Brad Smith
Don’t use punctuation.
Never write “click here.” If instruction text is needed, the correct verb to use is “select” followed by a direct object (select payment options, select your project).