A toggle button allows users to toggle between two states: active (pressed) and inactive (not pressed).

For example, a toggle button might be used to show or hide a screen element or to provide a filtered view of a dataset.

Toggle buttons – live examples

Toggle buttons with semantics – live examples

Disabled toggle buttons – live examples

When to Use

Use the toggle button:

• To switch between different states.
• To activate or deactivate an object or element in a toolbar.

Don’t use the toggle button:

• For actions that trigger an activity, flow, or process (such as Create, Edit, or Save). Use the button instead.
• To show a group of options. Use the split button or the segmented button instead.

Anatomy

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the state when the button is pressed.

Variants

Three toggle button variants are available:

• Text only
• Icon only
• Text and icon

Toggle button variants – live examples

(from top to bottom: text only, icon only, text and icon)

The toggle button also visualizes the priority of the action. Three variants are available:

• Primary
• Secondary (= standard)
• Tertiary

Toggle button variants for prioritization – live examples

(from top to bottom: primary, secondary, tertiary)

Behavior and Interaction

Pressing the toggle button switches between the active and inactive states. The impact of the toggle button is directly recognizable.

Toggle button behavior – live examples

Related Links