Skip to main content

ToggleButton

<ui5-toggle-button>

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.js";

Basic Sample​

Properties​

pressed​

DescriptionDetermines whether the component is displayed as pressed.
Typeboolean
Defaultfalse

design​

DescriptionDefines the component design.
Type"Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention"
Default"Default"

disabled​

DescriptionDefines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
Typeboolean
Defaultfalse

icon​

DescriptionDefines 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.
Typestring | undefined
Defaultundefined

endIcon​

DescriptionDefines 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.
Typestring | undefined
Defaultundefined

submits​

DescriptionWhen 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.`
Typeboolean
Defaultfalse
DeprecatedSet 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".

tooltip​

DescriptionDefines the tooltip of the component.
Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
Typestring | undefined
Defaultundefined
Since1.2.0

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring | undefined
Defaultundefined
Since1.1.0

accessibilityAttributes​

DescriptionDefines 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.
TypeButtonAccessibilityAttributes
Default
Since1.2.0

type​

DescriptionDefines whether the button has special form-related functionality.
Note: This property is only applicable within the context of an HTML Form element.
Type"Button" | "Submit" | "Reset"
Default"Button"
Since1.15.0

accessibleRole​

DescriptionDescribes 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.
Type"Button" | "Link"
Default"Button"
Since1.23

Slots​

default​

DescriptionDefines 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.
TypeArray<Node>

Events​

click​

DescriptionFired 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.
TypeEvent
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
buttonUsed to style the native button element

More Samples​

Design​

Toggle Buttons have "design" property with several options that defines their visual appearance.

Icon Only​