Description

A switch button is a control that is used to quickly toggle between two mutually-exclusive states, such as On and Off.

For example:

Open

Usage & Behavior

General guidelines

Structure

The size of the button may be either big or small.

Default state

The switch must start with a default selection.

Content

The switch consists of:

• Main button area, including:

  • a colored background, which changes when the state is changed.

  • a round toggle button, which moves between the two sides when the state is changed.

  • (optional) a label within the button area, describing the current state. This can be either ✓ and ☓, or On and Off.

  • A small-sized button may have On and Off, or Empty (Base).

• A preceding label, describing what the switch will do when it is in the On state (e.g. Show only employees).

States

State	Text On	Text Off	Icon On	Icon Off	Base On	Base Off		Text On (small)	Text Off (small)	Icon On (small)	Icon Off (small)	Base On (small)	Base Off (small)	Comment

State	Text On	Text Off	Icon On	Icon Off	Base On	Base Off		Text On (small)	Text Off (small)	Icon On (small)	Icon Off (small)	Base On (small)	Base Off (small)	Comment
Regular	Open
Hover
Active
Disabled
Warning
Focused

Interaction

• Clicking the toggle triggers the action immediately.

• The user is not limited to clicking the round toggle button: clicking anywhere within the switch will change its state.

Validation and Errors

Please refer to Field Validation for more information.

Transitions

There should be a smooth transition between the two states. See code below.

Best practices

Use:

• when a change is required immediately after the user toggles the switch.

• where there are On / Off options.

• when you want to emphasize an action, for example in a ribbon.

Don’t use:

• where there are more than two options.

• where the user has to perform several actions before the change will become effective → use Checkboxes instead.

• where the change is visible as soon as the action was performed → use Checkboxes instead. For example, to show or hide certain rows in a data table or data sets in a chart.

• Inside a form → use Radio Buttons or a single Checkbox instead.

General

• Where possible, use ✓ and ☓ instead of On and Off within the button area.

• Keep preceding labels short and informative.

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.

• Where space becomes limited, the switch button size may be reduced from big to small.

Design

Code