Description

A dialog button allows the user to perform a single action when clicked.

There are 3 distinctive visual styles, depending on the importance of the action:

Open	Regular Button
Open	Enter Button
	Emphasized Button

Usage & Behavior

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.

Content

Only text can be displayed

States

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.

Other interactions are shown in the States section above.

Validations and errors

Clicking a button can trigger a validation process, e.g. when confirming an action such as filling out a form. Where an input is invalid, the state of a button can be changed.

If a page, pane, or form has an error:

• the related buttons are disabled.

• an error message appears above or next to the buttons.

See Field Validation for more info.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Responsive design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

• The width of dialog buttons and their font size should always remain the same.

• Where space becomes limited:

  • dialog buttons may be replaced with icon buttons.

  • options may be condensed into a button menu.

Design

Code