...
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
...
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 clicking the button, and the label where used, triggers the action.
On menu icon buttons:
Clicking clicking the button, and the label where used, opens/closes the Action Menu.
On toggle icon buttons:
clicking the button, and 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.
...
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. |
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> |