...
 | Regular Button |
 | Enter Button |
 | Emphasized Button |
For example:
...
Usage & Behaviour
General guidelines
An Enter button can only appear once per window, pane, or dialog etc.
An Emphasized button can only appear once per window, pane, or dialog etc.
There could be multiple regular buttons.
Placement and Positioning
Enter buttons should be placed on the right of a container, beneath any related content such as popup text.
Regular and Emphasized buttons should be either:
placed to the left of the Enter button, separated by a space.
aligned to the left of the container. Do not use this option in wide containers where there will be a large space between buttons. See the example in the Best Practices section below.
Emphasized buttons should be placed on the left of any related Regular buttons.
 |
For further examples, see Popups.
...
State | Enter | Regular | Emphasized | Comment | ||||
|---|---|---|---|---|---|---|---|---|
Regular (enabled) |  |  |  | |||||
Hover |  |  |  | Mouse cursor is over the button, but it has not yet been clicked. | Active |  | ||
Active | |  |  | On clicking the button, but not yet triggering it, e.g. by releasing the left mouse button. | ||||
Disabled |  |  |  | |||||
Error | N/A | N/A | N/A | In case of an error, the button should be disabled. | ||||
Warning | N/A | N/A | N/A | |||||
Focused | ||||||||
Focused Hover | ||||||||
Focused Active | ||||||||
Focused Disabled |
Interaction
The Enter button can be triggered by either:
clicking on it, or
pressing the Enter key on the keyboard.
The Regular and Emphasized buttons are selected only by clicking.
...
If a page, pane, or form has an error:
the related buttons are disabled.
an error message appears above or next to them.
Best practices
The Emphasized button can only appear once per window, pane, or dialog etc.
The Enter button can only appear once per window, pane, or dialog etc.
 |
the buttons.
See Field Validation for more info.
Design
Zeplin link | Screen Thumbnail |
|---|---|
 |  |
 |  |
 |  |
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">
<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/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">Enter 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 type="button" class="btn btn-primary btn-sm btn-fixed-width">Enter Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-primary btn-sm btn-fixed-width">Enter Button</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 btn-primary btn-sm btn-fixed-width" disabled>Enter Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-primary btn-sm btn-fixed-width" disabled>Enter Button</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">Error</label>
<div class="col-lg-4">
<button type="button" class="btn btn-primary btn-sm btn-fixed-width is-invalid">Enter Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-primary btn-sm btn-fixed-width is-invalid">Enter Button</button></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Regular 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 btn-light btn-sm btn-fixed-width">Default Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-light btn-sm btn-fixed-width">Default Button</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 btn-light btn-sm btn-fixed-width" disabled>Default Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-light btn-sm btn-fixed-width" disabled>Default Button</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">Error</label>
<div class="col-lg-4">
<button type="button" class="btn btn-light btn-sm btn-fixed-width is-invalid">Default Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-light btn-sm btn-fixed-width is-invalid">Default Button</button></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Emphasized 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 btn-secondary btn-sm btn-fixed-width">Empha Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-secondary btn-sm btn-fixed-width">Empha Button</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 btn-secondary btn-sm btn-fixed-width" disabled>Empha Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-secondary btn-sm btn-fixed-width" disabled>Empha Button</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">Error</label>
<div class="col-lg-4">
<button type="button" class="btn btn-secondary btn-sm btn-fixed-width is-invalid">Empha Button</button>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><button type="button" class="btn btn-secondary btn-sm btn-fixed-width is-invalid">Empha Button</button></script></code></pre>
</div>
</div>
</form>
</div>
</div> |
...