Guidelines
When to use
- To highlight a main action: When there are multiple related actions that users might want to perform, and one action is more common or primary, while others are secondary. For example, a "Save" button with additional options like "Save As" or "Save and Close".
When not to use
- Grouping unrelated actions: If the actions are not related and there isn't enough space in your design to accommodate them openly, consider using a Dropdown Button instead.
- Enough space to show all actions: Since the Split Button requires user interaction to reveal hidden options, consider the impact of displaying actions separately when there's enough space. Ensure that won’t affect the visual scanning of the page.
Variants
As the Split Button is composed of a standard Button and a Dropdown Button, it shares the same properties, including Variants. You can choose between Primary, Secondary, or Tertiary variants to match the importance and prominence of the actions in your design.
Similar to the Dropdown Button, the Danger variant is not available to prevent grouping multiple potentially destructive actions together. If necessary, a destructive action can appear once in the Overflow Menu, always positioned last in the list.
Please refer to the Button's hierarchy guidelines for more details on selecting the correct variant.
Alignment
By default, the Overflow Menu is placed below and left-aligned with the Dropdown Button. If the component is near the window’s edge, it automatically adjusts its alignment to ensure it remains visible on the screen.
Split Button vs. Button
While the Split Button seems similar to a regular Button, they differ in their purposes and the effects when clicking them:
- Button: A regular Button offers a single action that is immediately triggered when clicked.
- Split Button: The Split Button provides multiple actions while ensuring the main and most important action remains visible. It features two clickable areas: the primary button triggers the main action immediately, and the dropdown button reveals the secondary actions in the Overflow Menu.
Split Button vs. Dropdown Button
The two components allow for saving space when multiple actions need to be offered in the UI. When deciding which one to choose, you need to consider the hierarchy of the actions:
- Dropdown Button: The main action cannot be distinguished; all alternatives are at the same hierarchy level.
- Split Button: It acts as two distinct buttons in one: a regular Button that triggers a main action and a Dropdown Icon Button that opens the Overflow Menu with a list of related alternative actions.
Behavior
Mouse interactions
Unlike the standard Button, clicking the arrow (Dropdown Button) does not trigger an action; instead, it opens the Overflow Menu.
- Clicking the Button triggers the action.
- Clicking the Dropdown Button in the default state opens the Overflow Menu. It can be closed by clicking the Button again or clicking outside of the component.
- Clicking one of the List Items in the Overflow menu will trigger the action and close the Overflow Menu.
Keyboard interactions
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the Button. |
|
Double Tab |
Sets focus on the Dropdown Button. |
|
Space or Enter |
Trigger the action or open the Overflow Menu, setting focus on the first List Item. |
|
Up or Down arrows |
Moves between the Overflow Menu List Items. |
|
Space or Enter |
Select the List Item and trigger the action. |
|
Escape |
Closes the Overflow Menu. |
Content
Main elements
|
Element |
Description |
|---|---|
|
Button Label |
Button labels follow the same guidelines as the Button content guidelines. |
|
Dropdown Button |
Dropdown Buttons follow the same guidelines as the Dropdown Button Guidelines |
|
Leading Icon |
- |
|
Overflow Menu List Items |
If the List Item’s text overflows the Menu’s container, it will be broken into the next line. |
Tone
All Split buttons should be written in an actionable tone. Our goal is to ensure that the user knows exactly what will happen when it is clicked, and the content should guide them.
Do
- Organize the Overflow Menu List Items logically: To ensure the best usability, place the most important action as the label and the most frequently used options at the top of the Overflow Menu. If the priority cannot be determined, use alphabetical order.
- Group Overflow Menu List Items: If you group more actions, try to group them according to their purpose, topic, or functional criteria.
Do not
- Add a Trailing Icon: Adding a Trailing Icon within the Split Button might confuse users with the Dropdown Button on the right. If an icon is required, use the leading variant, on the left.
- Avoid including more than 5 actions: To maintain the component's high usability, avoid including more than 5 actions. If necessary, try to group them according to their purpose or topic.
