Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
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:
A component which allows the user to trigger a "flow defined single action" (e.g. Apply, Continue, Expand) in context to a container its located in (e.g. screen, form, wizard, popup, popover etc...).
Example for a table with a row of buttons from different types (icon, Icon + name, split) at the top
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
Types
Usage & Behavior
Buttons are used primarily on action items. Some examples include Add, Save, Delete, Cancel. Do| Type | Usage |
|---|---|
Primary & Secondary
| Used for either main or secondary action on the page/pane/dialog |
Icon & icon + label
| Buttons used in buttons to better communicate what the button does.
|
split
| Used when there are several possible actions related but only one primary action (e.g most frequent used). |
Link  | |
| Ribbon | Used in the ribbon pattern. see <<TBD link to pattern>> |
| Toggle |
Usage & Behavior
A button allows the user to trigger a "flow defined single action" (e.g. Apply, Continue, Expand) in context to a container its located in. 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
Labels
Button labels tell users what will happen when they click the button.
- Don’t combine an icon and text within one button.
- Choose a button text that is short and meaningful.
- Use imperative verbs that describe the action, such as Add or Delete. Use sentence-style capitalization (only the first word in a phrase and any proper nouns are capitalized). In most cases, do not use more than three words for button labels.
- For Sets of Buttons, use specific labels, such as Save or Discard, instead of using OK and Cancel. This is particularly helpful when the user is confirming an action.Don’t use tooltips because they are only visible on desktop devices. However, you can use action.
- Use tooltips for icon buttons.
- Do not use Uppercase except the The 'OK' button.
- In some instances a well understood acronym may be used.
Responssiveness
Disabled The 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.themselves are not responsive. The button text and position depend on the settings for the parent container.
Best practices
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
- Don’t combine an icon and text within one button
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>
|
Related
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|