Patterns

Split button

Use the split button to let users choose the action that a button will perform or change the mode of that action.

The split button combines a button with a popout to allow users to change the action to be performed when the button is clicked.

(left to right) Default state; Popout open; State after selection
(left to right) Default state; Popout open; State after selection

Usage

Split buttons should be used when there are several closely-related, mutually-exclusive actions that a user might take. The split button should present an obvious default action, with secondary actions (or variations on the primary action) listed in a popout. It can replace instances where a separate dropdown menu changed the functionality of a button.

  • DO: Use for similar actions that have the same basic outcome (Approve, Approve with Comment, Approve and Repeat, e.g.)
  • DO: Use to replace instances where a dropdown, checkbox or other control would alter the result of clicking the button (checkbox to “Create another”)
  • DON’T: Use for oppositional actions (Approve, Reject, e.g.)
  • DON’T: Use for destructive actions

Styles & Structure

A split button uses a default button as its left side, but with a chevron-down icon button attached on the right. Clicking the chevron button opens an attached popout menu with alternate actions. Each action has a primary label and an optional summary line.

Rules

  • The “expand” (chevron) button should be a square and its width should match the height of the parent button
  • Only use primary or secondary filled button styles. No inverse, red buttons, etc.
  • When open, the popout should have a white (Neutral 0) background, with a border matching the fill color of the parent button: Green 700 for Primary buttons and Neutral 800 for Secondary buttons.
  • The currently-selected option should be indicated with the check () icon. Its background color remains white unless the user hovers over it.
  • On hover, an option’s background color should change to Neutral 100.

Split button primary
Split Button in Primary button style

Split button secondary
Split Button in Secondary button style

  • DO: Use the optional summary line to add context
  • DO: Include the currently-selected option in the dropdown
  • DON’T: Include the summary in the button label
  • DON’T: Use icons inside the popout
  • DON’T: Use inverse button styles (it ends up just looking like a select) DON’T DO THIS! It looks like an HTML select.

Behavior

Clicking the expand/chevron button opens the attached popout. When the popout is open, the chevron icon should be replaced with chevron-up () to indicate that it can be used to close the popout.

When a user clicks on an action within the popout, 3 things happen:

  1. The label on the parent button changes to match the label of the option in the popout
  2. The popout closes and the chevron icon changes back to chevron-down ()
  3. The now-selected option is indicated with the check () icon inside the popout (not visible until the user re-opens the popout)

If the user clicks on the option that is already selected, the popout simply closes and no other change is needed. Selecting an option in the popout does not perform that action.

In most cases, the selected option should be remembered/sticky for future uses of that feature. (e.g., if a user selects “Save and Duplicate” in Compose, that option should be pre-selected the next time the user opens Compose).

  • DO: Remember the selected state for future uses
  • DON’T: Perform the action when the user selects it from the popout
  • DON’T: Include the summary line in the parent button label

References