Lead: Asaf Ben-Oved

Status

colour	Yellow
title	Ongoing

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 Drop Down Menu

Content

The label should address the primary action of the button. See additional guidelines in Buttons#Labels.

See Drop Down Menu for the order of values.

Internal Logic

The Displayed action and menu icon are treated as 2 distinct buttons Primary and menu with their own states
See example for hover state:
The primary action should appear also in the menu
The button has 2 modes of operations
- Persistent split button - the default is kept until the user makes a different selection which then becomes the default
- Fixed split button - the primary is kept default no matter what the user selects in the menu

States

State	Image	Comment
Regular
Hover
Active		The menu closes once the user had selected the alternative action
Disabled
Error

Interaction

Clicking the primary action on the left, the action is activated
Clicking on the arrow exposes a menu of alternative actions

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 is commonly used

Don't Use:

For navigation (use Links instead)
When there are relatively many options (more than 5 or 6). Otherwise, consider using Action Menu

Future Version (TBD)

Semi enabled - When The menu can also contain specific disabled actions while the Primary is enabled and vice versa

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
https://zpl.io/V4WPQ82

New LUX design

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/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/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="-101" 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="-101" 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="-101" 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="-101" 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="-101" 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="-101" 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>