Description

Status


colour	Yellow
title	Ongoing

A component which 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

Buttons differ from links in this regard, because links navigate the user to a new state in the application but never initialize any actions.

Types

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

Usage Usage & Behavior

Some examples include Add, Save, Delete, Cancel.

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

General guidelines

Labels

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

Use imperative verbs that describe the action, such as Add or Delete. Use sentence-style capitalization (only the first word in a phrase and any proper nouns are capitalised). In most cases, do not use more than three words for button labels.capitalisation.
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.
In some instances a well understood acronym may be used.

Responssiveness

Only ribbon buttons of icon <<TBD link to appropriate place>>
The buttons themselves are not responsive
<<Future suggestion - to make the primary/secondary buttons change to icons in case for responsiveness>>

Positioning

See

Responssiveness

According to button type

Positioning

See by specific type

Interaction (general for all buttons)

When hovering, Mouse cursor change from - pointer To - Hand
Clicking (pressing and releasing the input source e.g. left mouse button) on the button will initiate its action

Validations and errors

Primary, Secondary and icon buttons do not have validation states
Ribbon and Toggle icon can have such states
If a page, pane or form has an error, the buttons are disabled and an error appears above or next to them
For more information see /wiki/spaces/ENG/pages/33555837

Transitions

Described in Ribbon buttons

Best practices

Use buttons in situations where users might need to:

submit a form
begin a new task
trigger a new UI element to appear on the page
specify a new or next step in a process

Don’t combine an icon and text within one buttonIn 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.

Do not use Buttons as navigational elements. Instead, use Links.

Accessibility compliance

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Column

width	33%

Column

width	33%

Column

width	33%

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 48	New Version 49
Changes made by	Asaf Ben-Oved	Asaf Ben-Oved
Saved on	Feb 03, 2020	Feb 03, 2020

Content Comparison

Versions Compared

Key

Description

Types

Usage Usage & Behavior

General guidelines

Labels

Responssiveness

Positioning

Responssiveness

Positioning

Interaction (general for all buttons)

Validations and errors

Transitions

Best practices

Accessibility compliance

Focus management

Screen reader support

Contrast & size compliance

Design

Code