Split Button
A split button is a UI element that combines a primary button with a secondary dropdown menu, offering users a choice between executing a default action or selecting from additional options.
When to use
- Use a split button when there is a primary action that users are likely to perform most often, but there are also alternative actions they might occasionally choose.
- When space is limited but you need to provide access to multiple related actions, a split button helps consolidate these actions in a compact format.
- To avoid cluttering the interface with multiple buttons, especially when the additional options are contextually related to the primary action.
- When it's important to make users aware of secondary actions without hiding them in a less obvious menu or requiring additional navigation.
- When the secondary actions are contextually relevant to the primary action, providing logical grouping and enhancing user understanding of the available options.
Guidelines
- Ensure the primary action is the most frequently used or important action. The primary button should be clearly labeled and visually distinct.
- The primary action should be directly accessible with a single click. Users should not have to open the dropdown to access the most common action.
- Use clear and concise labels for both the primary button and the dropdown options.Ensure the labels accurately describe the actions.
- Clearly indicate that the button has a dropdown menu, typically with a downward-facing arrow or similar icon. Ensure the dropdown indicator is visually distinct from the primary button.
- Ensure the split button can be navigated using a keyboard, with clear focus states for both the primary action and the dropdown menu.
Basic
Primary action with group of actions defined in dropdown.
<div class="btn-group">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
Sizes
btn-sm & btn-lg classes are used for smaller and large split button sizes respectively.
<div class="btn-group me-2">
<button type="button" class="btn btn-primary btn-sm">Save</button>
<button type="button" class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
<div class="btn-group me-2">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
<div class="btn-group me-2">
<button type="button" class="btn btn-primary btn-lg">Save</button>
<button type="button" class="btn btn-primary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
Severity
Severity defines the type of split buttons.
<div class="btn-group me-2">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
<div class="btn-group me-2">
<button type="button" class="btn btn-tertiary">Save</button>
<button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
<div class="btn-group me-2">
<button type="button" class="btn btn-warning btn-outline">Save</button>
<button type="button" class="btn btn-warning btn-outline dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
Disabled
Disabled split button actions can not be performed.
<div class="btn-group">
<button type="button" class="btn btn-disabled" disabled>Save</button>
<button type="button" class="btn btn-disabled dropdown-toggle dropdown-toggle-split" disabled data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="ds ds-checkmark"></i> Update</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-close"></i> Delete</a></li>
<li><a class="dropdown-item" href="#"><i class="ds ds-user"></i> Settings</a></li>
</ul>
</div>
Accessibility
- Ensure that both the primary button and the dropdown toggle can be focused using the Tab key.
- Users should be able to activate the primary action using the Enter or Space key. The dropdown menu should open with the Down Arrow, Space key or Enter key, and users should be able to navigate the menu options using the keyboard.
- Ensure focus is managed properly when the dropdown menu opens. Focus should move to the first item in the dropdown. When the dropdown menu is closed, focus should return to the dropdown toggle.
- Provide visible focus indicators for the primary button, dropdown toggle, and each item in the dropdown menu.
- Use appropriate ARIA roles, such as use aria-expanded to indicate the state of the dropdown toggle (true when open, false when closed).
- Ensure that actions triggered by the split button are clear and reversible if necessary, providing users with confirmation dialogs or undo options.