...
Lead: Asaf Ben-Oved ONGOING
| Table of Contents |
|---|
Description
Use for toolbars and displays where words won’t comfortably fit alongside icons.
May also be used as a menu button.
...
| 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
For toolbars of multiple Icons use a Button Group (with a vertical line separator)
Use this type when you want to draw more attention to the button, or when an icon helps to clarify or convey more meaning.
Text
...
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
For single action button, clicking on the icon will either carry an action or set the button in active state.
If the button is in Active state, clicking again will return to regular (except toggle icon).
Toggle buttons :
- can act bit different by switching between 2 connected icons
- Do not have Disabled or Active state but only Hover
Best practices
Only use when the Icon’s meaning is unambiguous.
Consider pairing with a Tooltip to describe the Icon’s underlying action
Design
...
...
...
...
...
Code
...
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:
 | 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 | |
|---|---|
 | |
 | |
 |
Code
| Html macro | ||
|---|---|---|
| ||
<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> |