Content Comparison

Versions Compared

Version	Old Version 14	New Version 15
Changes made by	Asaf Ben-Oved	Asaf Ben-Oved
Saved on	Dec 29, 2019	Jun 02, 2020

Key

This line was added.
This line was removed.
Formatting was changed.

Lead: Asaf Ben-Oved

Status

colour	Yellow
title	Ongoing

Description

A split button couples a primary action on the left with an attached dropdown menu of related actions.

This

This component is used when there are many possible actions but only one primary action.

Image Removed

Image Added

Usage & Behaviour

General guidelines

Text

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

Format 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 act as a menu (see more information in <<menu link>>)Image Removed

Image Added

Order

For the items within the menu - by popularity by popularity - when there are a few available items (e.g. less than 5)

Internal Logic

The primary button should appear in the menu and indicated as selected
The Primary and and menu icon are treated as 2 distinct buttons with their own states
See example for hover state:
Image Modified

Default Selection

The primary action should be the most common use case, while the dropdown menu shows a list of related actions.

Persistent split button <<?Can the default be changed - according to the menu?>>. The The default is kept until the user makes a different selection which then becomes the default. The button label changes accordingly.

States

Split buttons can be enabled or disabled

State
Image
Comment
Semi Enabled
The menu can also contain specific disabled actions while the Primary is
enable
enabled and vice versa
If a split button is disabled, the colour
Hover
Image Added
the color of the button changes and the cursor indicates that you cannot click the split button
Active
Image Added
Disabled
Image Added
Semi Enabled
<TBD>
Error
Image Added

Interaction

When you click the primary action on the left, the action is activated.
When you click the arrow, it exposes a menu 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 primary action occurs.

Best practice

Use:

This pattern is used when there are many possible actions but only one primary action
- Use a split button only if the actions are related and only one of the actions in commonly used
- Typically placed in
a
- the main toolbar
Used

Don't Use:

For navigation, only for actions
not navigation

Design

Zeplin link	Screen thumbnail
https://zpl.io/V4WPQ82

Image Removed

Image Added

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>

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>

Table of Contents

outline	true
style	square