Description

A dialog button allows the user to perform a single action when clicked.

There are 3 distinctive visual styles, depending on the importance of the action:

	Regular Button
	Enter Button
	Emphasized Button

Usage & Behaviour

General guidelines

An Enter button can only appear once per window, pane, or dialog etc.
An Emphasized button can only appear once per window, pane, or dialog etc.
There could be multiple regular buttons.

Placement and Positioning

Enter buttons should be placed on the right of a container, beneath any related content such as popup text.
Regular and Emphasized buttons should be either:
- placed to the left of the Enter button, separated by a space.
- aligned to the left of the container. Do not use this option in wide containers where there will be a large space between buttons. See the example in the Best Practices section below.
Emphasized buttons should be placed on the left of any related Regular buttons.

For further examples, see Popups.

States

State	Enter	Regular	Emphasized	Comment
Regular (enabled)
Hover
Active				On clicking the button, but not yet triggering it, e.g. by releasing the left mouse button.
Disabled
Error	N/A	N/A	N/A	In case of an error, the button should be disabled.
Warning	N/A	N/A	N/A
Focused
Focused Hover
Focused Active
Focused Disabled

Interaction

The Enter button can be triggered by either:
- clicking on it, or
- pressing the Enter key on the keyboard.
The Regular and Emphasized buttons are selected only by clicking.

Other interactions are shown in the States section above.

Validations and errors

Clicking a button can trigger a validation process, e.g. when confirming an action such as filling out a form. Where an input is invalid, the state of a button can be changed.

If a page, pane, or form has an error:

the related buttons are disabled.
an error message appears above or next to the buttons.

See Field Validation for more info.

Design

Zeplin link	Screen Thumbnail
https://zpl.io/29NpG7A
https://zpl.io/bJOdGjK
https://zpl.io/V4Mx83X

Code

<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/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">Enter 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">
							<button type="button" class="btn btn-primary btn-sm btn-fixed-width">Enter Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-primary btn-sm btn-fixed-width">Enter Button</button></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">
							<button type="button" class="btn btn-primary btn-sm btn-fixed-width" disabled>Enter Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-primary btn-sm btn-fixed-width" disabled>Enter Button</button></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">
							<button type="button" class="btn btn-primary btn-sm btn-fixed-width is-invalid">Enter Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-primary btn-sm btn-fixed-width is-invalid">Enter Button</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Regular 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">
							<button type="button" class="btn btn-light btn-sm btn-fixed-width">Default Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-light btn-sm btn-fixed-width">Default Button</button></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">
							<button type="button" class="btn btn-light btn-sm btn-fixed-width" disabled>Default Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-light btn-sm btn-fixed-width" disabled>Default Button</button></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">
							<button type="button" class="btn btn-light btn-sm btn-fixed-width is-invalid">Default Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-light btn-sm btn-fixed-width is-invalid">Default Button</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Emphasized 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">
							<button type="button" class="btn btn-secondary btn-sm btn-fixed-width">Empha Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-secondary btn-sm btn-fixed-width">Empha Button</button></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">
							<button type="button" class="btn btn-secondary btn-sm btn-fixed-width" disabled>Empha Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-secondary btn-sm btn-fixed-width" disabled>Empha Button</button></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">
							<button type="button" class="btn btn-secondary btn-sm btn-fixed-width is-invalid">Empha Button</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-secondary btn-sm btn-fixed-width is-invalid">Empha Button</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>