Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
place under button??
A split button couples a primary action on the left with an attached dropdown menu of related actions. The labelled section should show the most common use case, while the dropdown menu shows a list of related actions. This pattern is used when there are many possible actions but only one primary action.
If a split button is disabled, the colour of the button changes and the cursor indicates that you cannot click the split button.
If we enable changing the default action in the split button with the label (vs the Ribbon split button) - perhaps they should be 2 separate components.
Use split buttons only in desktop apps. Do not use in mobile apps. ??
Do we have one split button in the ribbon that has an icon for thr primary action, and another type that has just text as a primary action?
Usage & Behaviour
When you click the primary action on the left, the action is activated. When you click the arrow, it exposes a dropdown list of alternative actions. This pattern is used when there are many possible actions but only one primary action.
The split button is separated into two areas: the label and the icon. The separator between them signals that the two areas result in different actions.
Use a split button only if the actions are related and only one of the actions in commonly used.
If the split button is selected using keyboard actions and then Enter is presses, the primary action occurs.
Clicking/tapping the label area triggers one of two types of behaviour: (Do we want to enable both types????)
- It triggers the default action.
- It triggers the last action chosen by the user. Initially, it is the default action until the user makes a different selection which then becomes default. The button label changes accordingly. The button has a fixed size and truncates the text if the menu item is longer (as with the combo box).
States
Split buttons can be enabled or disabled.
If an action button is temporarily inactive, use the disabled status.
Interaction
When you click the primary action on the left, the action is activated. When you click the arrow, it exposes a dropdown list of alternative actions.
New LUX design
| Html macro | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
<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 | ||||
|---|---|---|---|---|
|