...
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 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 |   | |
Focused, Disabled |  | |
...
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>
|
...