The ui5-button component represents a simple push button.
It enables users to trigger actions by clicking or tapping the ui5-button, or by pressing
certain keyboard keys, such as Enter.
For the ui5-button UI, you can define text, icon, or both. You can also specify
whether the text or the icon is displayed first.
You can choose from a set of predefined types that offer different
styling to correspond to the triggered action.
You can set the ui5-button as enabled or disabled. An enabled
ui5-button can be pressed by clicking or tapping it. The button changes
its style to provide visual feedback to the user that it is pressed or hovered over with
the mouse cursor. A disabled ui5-button appears inactive and cannot be pressed.
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.
When set to true, the component will automatically submit the nearest HTML form element on 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";
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.
An object of strings that defines several additional accessibility attribute values for customization depending on the use case. It supports the following fields: - expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: - true - 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 - Tree - controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
Defines whether the button has special form-related functionality. Note: For the type property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
Describes the accessibility role of the button. Note: Use 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.