Lead: Asaf Ben-Oved

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

On click, toggles

Toggles between two opposite states.
Icon menu buttons	Opens an Action Menus.

Usage & Behaviour

General guidelines

...

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 Tooltip should be usedshown on hover.

States

State	Icon Button (similar to icon toggle button)	Icon Button + label	Icon Menu Button
Regular	Image Modified	Image Modified	Image Modified
Hover	Image Modified	Image Modified	Image Modified
Active	Image Modified	Image Modified	Image Modified
Disabled	Image Modified	Image Modified	Image Modified
Focused	Image Modified	Image Modified	Image Modified
Focused

+

Hover	Image Modified	Image Modified	Image Modified
Focused

+

Active	Image Modified	Image Modified	Image Modified
Focused

+

Disabled

Image Modified

Interaction

Clicking on the button will either:

trigger an action, or
(for toggle buttons) switch between opposite states.

Toggle icon buttons

Have 2 distinct, opposite actions.
Clicking on the icon will toggle between its states.

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 Modified
A locked icon, when clicked…
Image Modified
… turns into an unlocked icon.
Tooltips for toggle icon buttons should detail the next available action. Example:
Image Modified
The tooltip in the locked state would be Unlock.

Best practices

Use:

when the icon’s meaning is unambiguous. (Consider pairing with a Tooltip to describe the icon button’s underlying action).

Don’t use:

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

General

Separate groups of icons with a vertical separator

...

.

Design

...

Zeplin link

...

Icon

...

Icon with label

...

Accessibility Compliance

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

Focus management

Keyboard

Icon button

Icon Menu button

Image Removed

Code

...

sanitize	false

...

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="dropdowncol-menu dropdown-menu-smlg-4">
								<a<button classtype="dropdown-itembutton" hrefclass="#">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>btn icon-btn icon-btn-light btn-sm" data-toggle-second="tooltip" data-placement="right" title="Print" data-html="true">
								<a<i class="dropdown-item" href="#">Fifth Option</a>icon-print"></i>
							</div>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" dropdowndata-toggle" type-second="buttontooltip" data-toggleplacement="dropdownright" aria-haspopuptitle="truePrint" ariadata-expandedhtml="falsetrue">
	<i class="icon-print"></i>
</button>
/i>
</button></script></code></pre>
						</div>
					</div>
					<div class="dropdownform-menu dropdown-menu-smgroup row">
						<a<label classfor="dropdown-iteminputKey" hrefclass="#">First Option</a>
	<acol-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="dropdowncol-lg-item4" href>
							<button type="#">Second Option</a>
	<abutton" 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>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>
							</div>button>
						</div>
						<div class="form-group rowcol-lg-6">
							<label for="inputKey"<pre class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<buttonlanguage-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm" dropdowndata-toggle" type-second="buttontooltip" data-toggleplacement="dropdownright" aria-haspopuptitle="truePrint" ariadata-expandedhtml="falsetrue" disabled>
								<i class="icon-print"></i>
	print"></i>
</button></script></code></pre>
						</button>div>
							<div class="dropdown-menu dropdown-menu-sm">
</div>
								<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>
					</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Icon Button Text</div>
			<div class="dropdowncard-dividerbody"></div>>
				<form>
					<a<div class="dropdownform-item"group href="#">Fifth Option</a>row">
							</div>
						</div><label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-64">
							<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" disabled>
<button type="button" class="btn icon-btn icon-btn-light btn-sm">
								<i class="icon-print"></i>
</button>
/i><span class="mx-1">Print</span>
							</button>
						</div>
						<div class="dropdowncol-menu dropdown-menu-smlg-6">
	<a							<pre class="dropdown-item" href="#">First Option</a>
	<a"language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm">
	<i class="dropdownicon-itemprint"></i><span hrefclass="#">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>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-46">
									<button<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>
	i><span class="mx-1">Print</span>
</button></script></code></pre>
						</button>div>
						</div>
				</form>
			<div class="col-lg-6">
							<pre</div>
		</div>
		<div class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn icon-btn icon-btn-light btn-sm">
	<icard">
			<div class="iconcard-printheader"></i>
</button></script></code></pre>>Icon Toggle Button</div>
						</div><div class="card-body">
					</div><form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled<>Regular</label>
						<div class="col-lg-4">
							<button type="button" class="btn icon-btn icon-btn-light btn-sm" disabled>-light btn-sm toggle-lock" data-toggle-second="tooltip" data-placement="right" title="Unlock" data-html="true">
								<i class="icon-printlock"></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" 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> 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">Regular<>Disabled</label>
						<div class="col-lg-4">
							<button type="button" class="btn icon-btn icon-btn-light btn-sm">-sm toggle-lock" data-toggle-second="tooltip" data-placement="right" title="Unlock" data-html="true" disabled>
								<i class="icon-printlock"></i> Print
							</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> Print
</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> Print
							</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> Print
</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div> 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 28	New Version Current
Changes made by	Femi	Carlie Bradshaw
Saved on	Jul 30, 2020	Nov 02, 2023

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

Content Comparison

Versions Compared

Key

Description

Types

Usage & Behaviour

General guidelines

Content

Internal logic

States

Interaction

Best practices

Design

Accessibility Compliance

Focus management

Code

Responsive design

Design

Code