The ui5-togglebutton component is an enhanced ui5-button that can be toggled between pressed and normal states. Users can use the ui5-togglebutton 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-togglebutton 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-togglebutton.
ES6 Module Import
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.
Determines whether the ui5-togglebutton is displayed as pressed.
Defines the ui5-button design.
Note: Available options are "Default", "Emphasized", "Positive", "Negative", and "Transparent".
Defines whether the ui5-button is disabled (default is set to false). A disabled ui5-button can't be pressed or focused, and it is not in the tab chain.
Defines the icon to be displayed as graphical element within the ui5-button. The SAP-icons font provides numerous options.
See all the available icons in the Icon Explorer.
Defines whether the icon should be displayed after the ui5-button text.
Defines the size of the icon inside the ui5-button.
When set to true, the ui5-button will automatically submit the nearest form element upon press.
Important: For the submits property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
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.
Defines the text of the ui5-button.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.
Fired when the ui5-button 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 LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast White