Description

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

Verint LUX Design System > Icon Buttons > 16_Card.png

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

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

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:

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

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

Verint LUX Design System > Icon Buttons > 43_Lock_tooltip.png

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
Icon with label
Icon Menu

Code

<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>