Description

Status

colour	Yellow
title	Ongoing

A component that allows the user to trigger a "flow defined single

Description

Status

colour	Yellow
title	Ongoing

A component that allows the user to trigger a "flow defined single action" (e.g. Apply, Continue, Expand) in context to a container its located in (e.g. screen, form, wizard, popup, popover, etc...).

Example for a table with a row of buttons from different types (icon, Icon + name, split) at the top

Image Removed

Image Added

Types

Type	Image	Usage
Primary Regular and emphasisedDialog buttons		Used for either main or secondary actions on the page/pane/dialog
Icon / icon + labelbuttons		Buttons used in buttons to better communicate what the button does. <TBD>
Split buttons		Used when there are several possible actions related but only one Enter actions, and one main action (e.g most frequent frequently used).
Toggle buttons		Used to quickly switch between two possible (e.g. ON/OFF for advanced mode)
Ribbon Ribbon buttons		Used in the ribbon pattern. see Ribbon button.

Usage & Behavior

Some examples include Add, Save, Delete, Cancel.

Each pane or popup can have one Enter button
Any remaining calls-to-action are represented as secondary buttons

General guidelines

Labels

Content

Button labels tell users what will happen when they click the button.

Use verbs that describe the action, such as Add or Delete. Use sentence-style capitalisationcapitalization.
For Sets of Buttons, use specific labels, such as Save or Discard, instead of using OK and Cancel. This is particularly helpful when the user is confirming an action.

Responssiveness

Responsiveness

According to button type

Positioning

See by specific According to button type

States

Buttons states are described according According to button type

Interaction (general for all buttons)

When hovering, Mouse cursor change
from pointer
To Hand
Image Removed
Clicking (pressing and releasing the left mouse button) on the button target area, will initiate its action
If a user clicked (but didn't release) on a button and moved the mouse cursor:
Out of the target area and released the mouse button- the action will not be initiated

Out of the target area. Moved it back in the target area and released the mouse button - the action will be initiated

To Hand

Image Added

Clicking (pressing and releasing the left mouse button) on the button target area, will initiate its action

Validations and errors

See more specific details according to button type
For more information see /wiki/spaces/ENG/pages/33555837

Transitions

According to button type

Best practices

Do not use Buttons as navigational elements. Instead, use Links.
In most cases, do not use more than three words for button labels.
- Choose a button text that is short and meaningful.
Avoid acronym as labels in buttons.

Accessibility compliance

Focus management

Set in the general guidelines described in /wiki/spaces/UX/pages/308969693

Screen reader support

Set in the general guidelines described in /wiki/spaces/UX/pages/308248620

Contrast & size compliance

Are taken into consideration and embedded in the specific visual design

Design

According to button type

Code

Html macro

sanitize	false

<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">Emphasized 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-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>
		<div class="card">
			<div class="card-header">Enter 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>

outline	true
style	square
class	sticky-toc

Version	Old Version 65	New Version 66
Changes made by	Asaf Ben-Oved	Asaf Ben-Oved
Saved on	Jun 24, 2020	Jun 24, 2020

Content Comparison

Versions Compared

Key

Description

Description

Types

Usage & Behavior

General guidelines

Content

Responsiveness

Positioning

States

Interaction (general for all buttons)

Validations and errors

Transitions

Best practices

Accessibility compliance

Focus management

Screen reader support

Contrast & size compliance

Design

Code