Updated: July 18, 2024

Toggle Button

ui5-toggle-button | v1.0

Intro

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

Do

Use the toggle button:

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

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.
Anatomy of a toggle button
Anatomy of a toggle button

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

Implementation