ToggleButton

@ui5/webcomponents
<ui5-toggle-button>

ToggleButton States

ToggleButton Pressed ToggleButton Disabled ToggleButton Disabled and Pressed ToggleButton Accept ToggleButton Pressed Accept ToggleButton Reject ToggleButton Pressed Reject ToggleButton Transparent ToggleButton Pressed Transparent ToggleButton
<ui5-toggle-button>ToggleButton</ui5-toggle-button>
<ui5-toggle-button pressed>Pressed ToggleButton</ui5-toggle-button>
<ui5-toggle-button disabled>Disabled ToggleButton</ui5-toggle-button>
<ui5-toggle-button disabled pressed>Disabled ToggleButton</ui5-toggle-button>
<ui5-toggle-button design="Positive">Accept ToggleButton</ui5-toggle-button>
<ui5-toggle-button design="Positive" pressed>Accept ToggleButton</ui5-toggle-button>
<ui5-toggle-button design="Negative">Reject ToggleButton</ui5-toggle-button>
<ui5-toggle-button design="Negative" pressed>Reject ToggleButton</ui5-toggle-button>
<ui5-toggle-button design="Transparent">Transparent ToggleButton</ui5-toggle-button>
<ui5-toggle-button design="Transparent" pressed>Transparent ToggleButton</ui5-toggle-button>
	

ToggleButton with Icon

Menu Add Back Accept Deny
<ui5-toggle-button icon="menu">Menu</ui5-toggle-button>
<ui5-toggle-button design="Emphasized" icon="add">Add</ui5-toggle-button>
<ui5-toggle-button design="Default" icon="nav-back">Back</ui5-toggle-button>
<ui5-toggle-button design="Positive" icon="accept">Accept</ui5-toggle-button>
<ui5-toggle-button design="Negative" icon="sys-cancel">Deny</ui5-toggle-button>
	

ToggleButton with Icon Only

<ui5-toggle-button icon="accept"></ui5-toggle-button>
<ui5-toggle-button icon="action-settings" pressed></ui5-toggle-button>
<ui5-toggle-button icon="add"></ui5-toggle-button>
<ui5-toggle-button icon="alert" pressed></ui5-toggle-button>
<ui5-toggle-button icon="away" design="Positive"></ui5-toggle-button>
<ui5-toggle-button icon="bookmark" design="Positive" pressed></ui5-toggle-button>
<ui5-toggle-button icon="cancel" design="Negative"></ui5-toggle-button>
<ui5-toggle-button icon="call" design="Negative" pressed></ui5-toggle-button>
<ui5-toggle-button icon="camera" design="Transparent"></ui5-toggle-button>
<ui5-toggle-button icon="cart" design="Transparent" pressed></ui5-toggle-button>
	

ToggleButton

Yes/No Yes/No Toggle Button Toggle Button pressed On/Off On/Off Menu Menu Transparent Transparent
<ui5-toggle-button>Yes/No</ui5-toggle-button>
<ui5-toggle-button pressed>Yes/No</ui5-toggle-button>
<ui5-toggle-button>Toggle Button</ui5-toggle-button>
<ui5-toggle-button pressed>Toggle Button pressed</ui5-toggle-button>
<ui5-toggle-button design="Positive">On/Off</ui5-toggle-button>
<ui5-toggle-button design="Positive" pressed>On/Off</ui5-toggle-button>
<ui5-toggle-button design="Negative">Menu</ui5-toggle-button>
<ui5-toggle-button design="Negative" pressed>Menu</ui5-toggle-button>
<ui5-toggle-button design="Transparent">Transparent</ui5-toggle-button>
<ui5-toggle-button design="Transparent" pressed>Transparent</ui5-toggle-button>
	

Overview

The ui5-toggle-button component is an enhanced ui5-button that can be toggled between pressed and normal states. Users can use the ui5-toggle-button as a switch to turn a setting on or off. It can also be used to represent an independent choice similar to a check box.

Clicking or tapping on a ui5-toggle-button changes its state to pressed. The button returns to its initial state when the user clicks or taps on it again. By applying additional custom CSS-styling classes, apps can give a different style to any ui5-toggle-button.

ES6 Module Import

import "@ui5/webcomponents/dist/ToggleButton";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
pressed
boolean
false
Determines whether the component is displayed as pressed.
accessibleName
accessible-name
String
Sets the accessible aria name of the component.
since v1.0.0-rc.15
design
ButtonDesign
"Default"
Defines the component design.

The available values are:
  • Default
  • Emphasized
  • Positive
  • Negative
  • Transparent
  • Attention
disabled
boolean
false
Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
icon
string
""
Defines the icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options.

Example: See all the available icons in the Icon Explorer.
iconEnd
icon-end
boolean
false
Defines whether the icon should be displayed after the component text.
submits
boolean
false
When set to true, the component will automatically submit the nearest form element upon press.

Note: For the submits property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the text of the component.

Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
click
Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.

Note: The event will not be fired if the disabled property is set to true.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel