...

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

Image Removed

Image Added	Regular Button
Image Modified	Enter Button
Image Modified	Emphasized Button

For example:

Image Removed

Usage &

...

Behavior

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

Content

Only text can be displayed

States

State	Enter	Regular	Emphasized	Comment
Regular (enabled)	Image Modified	Image Modified	Image Modified
Hover	Image Modified	Image Modified	Image Modified

Mouse cursor is over the button, but it has not yet been clicked.


Active	Image Modified	Image Modified	Image Modified	On clicking the button, but not yet triggering it, e.g. by releasing the left mouse button.
Disabled	Image Modified	Image Modified	Image Modified
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

Interaction

...

The Enter button can be triggered by either:

clicking on it, or
pressing the Enter key on the keyboard.

...

Image Added	Image Added	Image Added
Focused Hover	Image Added	Image Added	Image Added
Focused Active	Image Added	Image Added	Image Added
Focused Disabled	Image Added	Image Added	Image Added

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.

...

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

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

See Field Validation for more info.

Best practices

The Emphasized button can only appear once per window, pane, or dialog etc.

The Enter button can only appear once per window, pane, or dialog etc.

...

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Keyboard	Description
Tab	Navigates to the next component.
Shift + Tab	Navigates to the previous component.
Space	Applies the action.
Enter	Applies the action.
Esc	N/A
Arrows	N/A

Responsive design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

The width of dialog buttons and their font size should always remain the same.
Where space becomes limited:
- dialog buttons may be replaced with icon buttons.
- options may be condensed into a button menu.

Design

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

Image Removed

Image Added

https://zpl.io/

bJOdGjK

Q0ekRyA

Image Removed

Image Added

https://zpl.io/V4Mx83X

Image Removed

Image Added

Code

Html macro

sanitize	false

<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">Emphasized>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-secondaryprimary btn-sm btn-fixed-width">Empha>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-secondaryprimary btn-sm btn-fixed-width">Empha>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-secondaryprimary btn-sm btn-fixed-width" disabled>Emphadisabled>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-secondaryprimary btn-sm btn-fixed-width" disabled>Emphadisabled>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-secondaryprimary btn-sm btn-fixed-width is-invalid">Empha>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-secondaryprimary btn-sm btn-fixed-width is-invalid">Empha>Enter Button</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Enter>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-primarylight btn-sm btn-fixed-width">Enter>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-primarylight btn-sm btn-fixed-width">Enter>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-primarylight btn-sm btn-fixed-width" disabled>Enterdisabled>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-primarylight btn-sm btn-fixed-width" disabled>Enterdisabled>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-primarylight btn-sm btn-fixed-width is-invalid">Enter>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-primarylight btn-sm btn-fixed-width is-invalid">Enter>Default Button</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Regular>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-lightsecondary btn-sm btn-fixed-width">Default>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-lightsecondary btn-sm btn-fixed-width">Default>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-lightsecondary btn-sm btn-fixed-width" disabled>Defaultdisabled>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-lightsecondary btn-sm btn-fixed-width" disabled>Defaultdisabled>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-lightsecondary btn-sm btn-fixed-width is-invalid">Default>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-lightsecondary btn-sm btn-fixed-width is-invalid">Default>Empha Button</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

...

Version	Old Version 32	New Version Current
Changes made by	Femi	Carlie Bradshaw
Saved on	Jul 30, 2020	Apr 04, 2024

Content Comparison

Versions Compared

Key

Usage &

Behavior

General guidelines

Placement and Positioning

States

Content

States

Interaction

Interaction

Best practices

Accessibility Compliance

Focus management

Responsive design

Design

Code