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

...

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.

...

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:

...

Split Buttons Hover Menu.png Image Added

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

Image Removed

Enter

Hover

Regular

Image Removed

Active

Image Removed

Disabled

Image Removed

Error

Image Removed

Warning

Image Removed

Focused

Image Removed

Image Added	Image Added
Hover	Image Added Image Added	Image AddedImage Added
Active	Image Added Image Added	Image AddedImage Added
Disabled	Image Added	Image Added
Focused	Image Added Image Added	Image AddedImage Added
Focused, Hover

Image Removed

Image Added

Split Buttons Menu-Focsed-Hover-Regular.png

Image Added

Image Added Split Buttons - Enter Focused Icon Hover.png

Image Added

Focused, Active

Image Removed

Focused, Disabled

Image Removed

Split Buttons Focused-Active-Regular.png

Image Added

Split Buttons Focused-Active-Menu-Regular-2.png

Image Added

Split Buttons - Enter Focused Active.png

Image Added Split Buttons - Enter Focused Active Icon.png

Image Added

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.

...

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

...

Clicking the Enter key will initiate the primary action.
Clicking the drop-down arrow will open the menu.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

...

Zeplin link

...

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

Zeplin link	Screen thumbnail
https://zpl.io/Q0Alg9n	Image Added
https://zpl.io/

V4WPQ82

vMgvGOY

Image Removed

Image Added

Code

Html macro

sanitize	false

<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>

...

Version	Old Version 48	New Version Current
Changes made by	Carlie Bradshaw	Rajesh Venkatesh
Saved on	Aug 12, 2020	Aug 29, 2024

Content Comparison

Versions Compared

Key

Usage & Behavior

General guidelines

Content

States

Interaction

Accessibility compliance

Clicking the Enter key will initiate the primary action.Clicking the drop-down arrow will open the menu.Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Focus management

Design

Code

Clicking the Enter key will initiate the primary action.
Clicking the drop-down arrow will open the menu.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.