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..

Open

Open

Types

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.

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 Field Validation.

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.