https://www.sap.com/design-system/live-examples/Toggle_Button/ToggleButton_LE_Enabled.html

Toggle buttons – live examples

https://www.sap.com/design-system/live-examples/Toggle_Button/ToggleButton_LE_SemanticEnabled.html

Toggle buttons with semantics – live examples

https://www.sap.com/design-system/live-examples/Toggle_Button/ToggleButton_LE_DisabledMix.html

Disabled toggle buttons – live examples

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.

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

Three toggle button variants are available:

• Text only
• Icon only
• Text and icon

https://www.sap.com/design-system/live-examples/Toggle_Button/ToggleButton_LE_VisualVariants.html

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

https://www.sap.com/design-system/live-examples/Toggle_Button/ToggleButton_LE_PrioritizationVariants.html

Toggle button variants for prioritization – live examples

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

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

https://www.sap.com/design-system/live-examples/Toggle_Button/ToggleButton_LE_BehaviourAndInteraction.html

Toggle button behavior – live examples