...
Lead: Asaf Ben-Oved
| Status | ||||
|---|---|---|---|---|
|
Description
A split button couples a primary action with an attached dropdown menu of related actions
...
Usage & Behaviour
General guidelines
Structure
The split button is separated into two areas: the label/icon and the arrow icon. The separator between them signals that the two areas result in different actions.
...
The icon which opens the menu acts as a menu (see more information in Drop Down Menu
...
Content
The label should address the primary action of the button. See additional guidelines in Buttons#Labels
For the items within the menu - by popularity.
Internal Logic
The primary action should appear in the menu, indicated as selected
The Displayed action and menu icon are treated as 2 distinct buttons with their own states
See example for hover state:
Default Selection
The primary action should be the most common use case, while the dropdown menu shows a list of related actions
States
...
State
...
Image
...
Comment
...
Regular
...
Hover
...
...
the color of the button changes and the cursor indicates that you cannot click the split button
...
Active
...
Disabled
...
Error
...
Interaction
Clicking the primary action on the left, the action is activated.
clicking on the arrow, it exposes a menu of alternative actions
Clicking an action will commit the action and close the menu
If the split button is selected using keyboard actions and then Enter is pressed, the displayed action is activated.
Best practice
Use:
When there are many possible actions but only one primary action
If the actions are related and only one of the actions in commonly used
Don't Use:
For navigation, only for actions
When there are more than 5 action items in the menu
Future Version (TBD)
Semi enabled - When The menu can also contain specific disabled actions while the Primary is enabled and vice versa
Persistent split button - The default is kept until the user makes a different selection which then becomes the default.
Accessibility compliance
Focus management
The button is treated as 2 distinct buttons
main/primary action
menu - which opens a menu of actions
Design
...
Zeplin link
...
Screen thumbnail
...
...
New LUX design
...
| sanitize | false |
|---|
...
| Table of Contents | ||
|---|---|---|
|
Description
A split button groups actions together in a Drop-down Menu, with one primary action and a set of related actions.
...
Usage & Behavior
General guidelines
Structure
The split button consists of:
an action area, with a label or icon showing the primary action.
an arrow icon.
The separator between these two areas signals that they have different actions.
...
The arrow icon opens an action menu, as a Drop-down Menu.
...
Content
The label in the action area should be the primary action.
The width of the action menu should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.
See the main Buttons information for guidelines on labels.
See Drop-down Menu for the order of options.
Internal Logic
The action area and the drop-down arrow area are treated as 2 distinct buttons, with their own separate states. For example, they have separate hover states:
...
The primary action should also be shown in the action menu.
The button has 2 modes of operations:
Persistent split button - the default action is kept until the user makes a different selection, which then becomes the default.
Fixed split button - the primary action is kept as the default, even when the user selects another option.
The action menu closes when the user makes a selection.
States
| Regular | Enter |
|---|---|---|
Regular | 
|  |
Hover | 
|   |
Active | 
 |   |
Disabled | 
|  |
Focused | 
|   |
Focused, Hover | 
|   |
Focused, Active | 
 |   |
Interaction
Clicking the left-hand action area triggers the primary action.
Clicking the right-hand drop-down arrow opens an action menu of alternative actions.
Clicking an action in the Action Menu triggers the related action.
Best practice
Use:
when there are many possible related actions, but only one primary action.
if the actions are related but only one of the actions is commonly used.
Don't use:
as a form element.
for navigation → use Links.
when there are a lot of related actions (more than 5 or 6) → consider using an Action Menu.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Description |
Tab | Navigates to the next component. |
Shift + Tab | Navigates to the previous component. |
Space | Opens the menu. For the Action menu’s focus management see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/918917536/Action+Menus#Focus-management. |
Enter | Applies the current action. |
Esc | N/A |
Arrows | Up/Down - Opens the menu. |
Design
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux |
...
.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css"> <link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script> <script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script> <link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css"> <div class="card"> <div class="card-header">Split Button <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div> <div class="card-body"> <form> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label> <div class="col-lg-4"> <div class="btn-group"> <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width">Split Button</button> <button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="- |
...
120" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-sm"> <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Fifth Option</a> </div> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group"> <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width">Split Button</button> <button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="- |
...
120" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-sm"> <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Fifth Option</a> </div> </div></script></code></pre> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label> <div class="col-lg-4"> <div class="btn-group"> <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" disabled>Split Button</button> <button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="- |
...
120" aria-haspopup="true" aria-expanded="false" disabled> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-sm"> <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Fifth Option</a> </div> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group"> <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" disabled>Split Button</button> <button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="- |
...
120" aria-haspopup="true" aria-expanded="false" disabled> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-sm"> <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Fifth Option</a> </div> </div></script></code></pre> </div> </div> <div class="form-group row"> <label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label> <div class="col-lg-4"> <div class="btn-group"> <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width is-invalid">Split Button</button> <button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split is-invalid" data-toggle="dropdown" data-offset="- |
...
118" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-sm"> <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Fifth Option</a> </div> </div> </div> <div class="col-lg-6"> <pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group"> <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width is-invalid">Split Button</button> <button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split is-invalid" data-toggle="dropdown" data-offset="- |
...
118" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu dropdown-menu-sm"> <a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Fifth Option</a> </div> </div></script></code></pre> </div> </div> </form> </div> </div> |
...