Lead: Rakefet Zur (Unlicensed) ONGOING

Table of Contents

Description

Icon buttons are used where Dialog Buttons won’t comfortably fit, such as toolbars, menus, and tables.

...

Types

Type	Usage
Icon buttons (standard)	Performs a single action, as a normal button.
Toggle icon buttons	Toggles between two opposite states.
Icon menu buttons	Opens an Action Menus.

Usage & Behaviour

General guidelines

Structure

When used with a label, the icon should be placed on the left side of the label. (For right-to-left languages, the icon should be on the right).

Content

As per the main Buttons information. See Icon Library.

Internal logic

When no label is shown, a Tooltip should be shown on hover.

States

...

Focus management
Screen reader support
Contrast & size compliance

...

Description

Use for toolbars and displays where words won’t comfortably fit alongside icons.

<< Most communicative 1 screen shot of the component >>

<<Types>>

<<use this section only if the component has several types that each requires its own page e.g. table, collapsable table>>

<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>

...

Type

...

Usage

Usage & Behaviour

<<use a visual for each sub-section>>

General guidelines

Only use when the Icon’s meaning is unambiguous.
For toolbars of multiple Icons use a Button Group.

Consider pairing with a Tooltip to describe the Icon’s underlying action.
Icon size: 16, 32 (state when.....)

Use this type when you want to draw more attention to the button, or when an icon helps to clarify or convey more meaning.

Clicking or tapping a toggle button changes its state to “pressed”. The button returns to its initial state when the user clicks or taps it again. The toggle button is comparable to a checkbox control.

States

Regular, hover, disabled, in focus, (selected and active - do we have toggle icons??????)

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Best practices

<<e.g. Slider should display a .label its on>>

Accessibility compliance

<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

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 Keyboard & Focus Management Guidelines>>

Screen reader support

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design

...

Zeplin link

...

Screen thumbnail

...

Code

...

State
Icon Button (similar to icon toggle button)
Icon Button + label
Icon Menu Button
Regular
Image Added Image Added Image Added
Hover
Image Added Image Added Image Added
Active
Image Added Image Added Image Added
Disabled
Image Added Image Added Image Added
Focused
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

On standard icon buttons:

clicking the button, or the label (where used), triggers the action.

On menu icon buttons:

clicking the button, or the label (where used), opens/closes the Action Menu.

On toggle icon buttons:

clicking the button, or the label (where used), switches between its states. Example:

Image Added	A locked icon, when clicked…
Image Added	… turns into an unlocked icon.

Tooltips for toggle icon buttons should detail the next available action. Example:

Image Added

The tooltip in the locked state would be Unlock.

Best practices

Use:

when the icon’s meaning is unambiguous.

Don’t use:

icons only, when there is enough space to add labels.

General

Separate groups of icons with a vertical separator.

Accessibility Compliance

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

Focus management

Keyboard	Icon button	Icon Menu button
Tab	Navigates to the next component.	Navigates to the next component
Shift + Tab	Navigates to the previous component.	Navigates to the previous component.
Space	Applies the action.	Opens the menu. For the Action menu’s focus management see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/918917536/Action+Menus#Focus-management.
Enter	Applies the action.	Opens the menu. For the Action menu’s focus management see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/918917536/Action+Menus#Focus-management.
Esc	N/A	N/A
Arrows	N/A	Up/Down - Opens the menu.

Responsive design

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

The size of icon buttons should always remain the same.
Where space is limited, multiple options may be condensed into a button menu.

Design

Zeplin link
Icon	Image Added
Icon with label	Image Added
Icon Menu	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">
<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">Icon Menu 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 class="btn icon-btn icon-btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true">
								<i class="icon-print"></i>
							</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 class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn icon-btn icon-btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true">
	<i class="icon-print"></i>
</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></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 class="btn icon-btn icon-btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true" disabled>
								<i class="icon-print"></i>
							</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 class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn icon-btn icon-btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true" disabled>
	<i class="icon-print"></i>
</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></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Icon 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 icon-btn icon-btn-light btn-sm" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true">
								<i class="icon-print"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true">
	<i class="icon-print"></i>
</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 icon-btn icon-btn-light btn-sm" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true" disabled>
								<i class="icon-print"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true" disabled>
	<i class="icon-print"></i>
</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Icon Button Text</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 icon-btn icon-btn-light btn-sm">
								<i class="icon-print"></i><span class="mx-1">Print</span>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm">
	<i class="icon-print"></i><span class="mx-1">Print</span>
</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 icon-btn icon-btn-light btn-sm" disabled>
								<i class="icon-print"></i><span class="mx-1">Print</span>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm" disabled>
	<i class="icon-print"></i><span class="mx-1">Print</span>
</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Icon Toggle 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 icon-btn icon-btn-light btn-sm toggle-lock" data-toggle-second="tooltip" data-placement="right" title="Unlock" data-html="true">
								<i class="icon-lock"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm toggle-lock" data-toggle-second="tooltip" data-placement="right" title="Unlock" data-html="true">
	<i class="icon-lock"></i>
</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 icon-btn icon-btn-light btn-sm toggle-lock" data-toggle-second="tooltip" data-placement="right" title="Unlock" data-html="true" disabled>
								<i class="icon-lock"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm toggle-lock" data-toggle-second="tooltip" data-placement="right" title="Unlock" data-html="true" disabled>
	<i class="icon-lock"></i>
</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>





<script>
$(function () {
		  $('[data-toggle="tooltip"], [data-toggle-second="tooltip"]').tooltip({trigger: 'hover', delay: { "show": 100, "hide": 0 }});
		  
		 
		});

$(".toggle-lock").click(function() {
		  icon = $(this).find('i');
		  icon.toggleClass('icon-lock icon-unlock');
		  var title = 'Unlock' ;

		  if( icon.hasClass('icon-unlock')){
		     title = 'Lock';
		  }
		  $(this).attr('data-original-title', title).tooltip('show');
		});
</script>

Version	Old Version 2	New Version Current
Changes made by	Rakefet Zur (Unlicensed)	Carlie Bradshaw
Saved on	Apr 14, 2019	Nov 02, 2023

State	Icon Button (similar to icon toggle button)	Icon Button + label	Icon Menu Button
Regular	Image Added	Image Added	Image Added
Hover	Image Added	Image Added	Image Added
Active	Image Added	Image Added	Image Added
Disabled	Image Added	Image Added	Image Added
Focused	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

Content Comparison

Versions Compared

Key

Description

Types

Usage & Behaviour

General guidelines

Structure

Content

Internal logic

States

Description

<<Types>>

Usage & Behaviour

General guidelines

States

Interaction

Validations and errors

Best practices

Accessibility compliance

Focus management

Screen reader support

Contrast & size compliance

Design

Code

Interaction

Best practices

Accessibility Compliance

Focus management

Responsive design

Design

Code