Versions Compared

Version Old Version 56 New Version 57
Changes made by

Hasitha Jayarathne

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 55

...

  • 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

    		Split Buttons - Regular.pngImage RemovedImage AddedSplit Buttons - Enter Regular.pngImage RemovedImage Added

    Hover

    		Split Buttons - Hover.pngImage RemovedSplit Buttons - Icon Hover.pngImage RemovedSplit Buttons - Enter Hover.pngImage RemovedSplit Buttons - Enter Hover Icon.pngImage RemovedImage AddedImage AddedImage AddedImage Added

    Active

    		Split Buttons - Selected.pngImage RemovedSplit Buttons - Icon Selected.pngImage RemovedSplit Buttons - Enter Selected.pngImage RemovedSplit Buttons - Enter Selected Icon.pngImage RemovedImage AddedImage AddedImage AddedImage Added

    Disabled

    		Split Buttons - Disabled.pngImage RemovedImage AddedSplit Buttons - Enter Disabled.pngImage RemovedImage Added

    Focused

    		Split Buttons - Focused.pngImage RemovedSplit Buttons - Focused Icon.pngImage RemovedImage AddedSplit Buttons - Enter Focused.pngImage RemovedSplit Buttons - Enter Focused Icon.pngImage RemovedImage Added

    Focused, Hover

    		Split Buttons - Focused Hover.pngImage RemovedSplit Buttons - Focused Icon Hover.pngImage RemovedSplit Buttons - Enter Focused Hover.pngImage RemovedSplit Buttons - Enter Focused Icon Hover.pngImage RemovedImage AddedImage AddedImage AddedImage Added

    Focused, Active

    		Split Buttons - Focused Active.pngImage RemovedSplit Buttons - Focused Icon Active.pngImage RemovedSplit Buttons - Enter Focused Active.pngImage RemovedSplit Buttons - Enter Focused Active Icon.pngImage RemovedImage AddedImage AddedImage AddedImage Added

    Focused, Disabled

    		Split Buttons - Focused Disabled.pngImage RemovedImage AddedSplit Buttons - Enter Disabled Focused.pngImage RemovedImage 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.

    ...

    Zeplin link

    Screen thumbnail

    https://zpl.io/Q0Alg9n

    		Image RemovedImage Added

    https://zpl.io/vMgvGOY

    		Image RemovedImage Added

    Code

    Html macro
    sanitizefalse
    <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>

    ...