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.
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.
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.
- 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 () background, with a border matching the fill color of the parent button:neutral.0for Primary buttons andgreen.700for Secondary buttons.neutral.800
- 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
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:
- The label on the parent button changes to match the label of the option in the popout
- The popout closes and the chevron icon changes back to
- 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).