...
Description
...
Buttons allow users to trigger an action – either by clicking on or tapping the button, or by pressing certain keys such as Enter. Buttons are used primarily to initialize an action, either in the background or foreground of an experience.
Use buttons in situations where users might need to:
- submit a form
- begin a new task
- trigger a new UI element to appear on the page
- specify a new or next step in a process
Buttons differ from links in this regard, because links navigate the user to a new state in the application but never initialize any actions.
See also
(split, icon button, ribbon button? link or text link? segmented buttons such as the zoomer? toggle button?)Status colour Blue title TBD
Usage & Behavior
Buttons are used primarily on action items. Some examples include Add, Save, Delete, Cancel. Do not use Buttons as navigational elements. Instead, use Links because it takes the user to a new page and is not associated with an action. Each pane or popup can have one primary button. Any remaining calls-to-action are represented as secondary buttons.
If a button is disabled, the colour of the button changes and the cursor indicates that you cannot click the button.
General guidelines
...
| Table of Contents |
|---|
Description
Buttons allow the user to perform a defined single action, such as navigating to a different view, choosing an option, or completing a task. These actions are always in context, relating to the container it's located in, such as a screen, form, wizard, popup, popover, etc..
...
Types
Type | Image | Usage |
 | Use for primary and secondary actions. | |
 | Use in areas where dialog buttons won’t comfortably fit, such as toolbars and tables. | |
 | Use when there are multiple related actions, with one primary action (e.g. the most frequently used). | |
 | Use to quickly switch between binary options, e.g. On/Off. | |
 | Use within the /wiki/spaces/UserExp/pages/1390479038 component. |
Usage & Behavior
General guidelines
Structure
A button consists of:
A trigger area. When selected, this performs an action.
A label. This can be text, an icon, or both.
For more information see button types above.
Placement and Positioning
As per each individual button type.
Button menus
For large button menus:
up to 3 primary actions should be shown at top level.
additional, secondary buttons should be grouped within a contextual Action Menu, shown to the right of the primary buttons.
...
Content
Button labels tell users what will happen when they click the button.
...
Use sentence-case capitalization.
Use
...
verbs that describe the action, such as Add or Delete
...
.
For
...
groups of
...
buttons, use specific labels describing the actions, such as Save or Discard,
...
rather than general terms such as OK and Cancel. This is particularly helpful when the user is confirming an action.
...
Disabled buttons are shown as inactive and cannot be clicked
(zoomer...) A segmented button shows a group of options. When the user clicks or taps one of the options, it stays in a pressed state. The segmented button is comparable to a radio button group control.
Responssiveness
The buttons themselves are not responsive. The button text and position depend on the settings for the parent container.
States
Buttons can be enabled or disabled.
Of the enabled buttons - only a single button can be the default button, this button activates the action when Enter is pressed.
If an action button is temporarily inactive, use the disabled status.
Validations and errors
The button itself cannot have an error state. However, if a page, pane or form has an error, the buttons are disabled and an error appears above or next to them.
link to validations? can the button error state occur? If yes then when. If no - then we need to move from the design.
Design
| Column | ||
|---|---|---|
| ||
| Column | ||
|---|---|---|
| ||
| Column | ||
|---|---|---|
| ||
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/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">Emphasized 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-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>
<div class="card">
<div class="card-header">Enter 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>
|
...
Internal logic
As per each individual button type.
States
As per each individual button type.
Interaction (general for all buttons)
Clicking the button target area will initiate its action.
When hovering, the mouse cursor changes from a pointer to a hand.
...
Where tooltips are needed please refer to Tooltips
Validations and errors
According to button type.
For further information, see /wiki/spaces/ENG/pages/33555837.
Transitions
As per each individual button type.
Best practices
Do not use Buttons as navigational elements → use Links.
In most cases, do not use more than three words for a button label.
Choose labels which are short and meaningful.
Avoid using acronyms as labels in buttons. Use language which the user will understand.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Responsive design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
For button menus:
where the width of the container is reduced and the 3 primary buttons cannot all be shown, they should be moved into an Action menu along with the other secondary buttons.
the most important primary action, such as Save, should always remain visible.
Design
As per each individual button type.
Code
As per each individual button type.