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.
Defines the icon, displayed as graphical element within the component. The SAP-icons font provides numerous options. Example: See all the available icons within the Icon Explorer.
Defines the icon, displayed as graphical element within the component after the button text. Note: It is highly recommended to use endIcon property only together with icon and/or text properties. Usage of endIcon only should be avoided. The SAP-icons font provides numerous options. Example: See all the available icons within the Icon Explorer.
When set to true, the component will automatically submit the nearest HTML form element on press. Note: This property is only applicable within the context of an HTML Form element.`
Type
boolean
Default
false
Deprecated
Set the "type" property to "Submit" to achieve the same result. The "submits" property is ignored if "type" is set to any value other than "Button".
Defines the tooltip of the component. Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
Defines the additional accessibility attributes that will be applied to the component. The following fields are supported: - expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: true or false - hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values: dialog, grid, listbox, menu or tree. - controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a lowercase string value.
Describes the accessibility role of the button. Note: Use ButtonAccessibleRole.Link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.
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.
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.