Button with Icon
Icon Only Button
Button with Design
ui5-buttoncomponent 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.
ui5-buttonUI, 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-buttonas enabled or disabled. An enabled
ui5-buttoncan 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-buttonappears inactive and cannot be pressed.
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.
Note: Available options are "Default", "Emphasized", "Positive", "Negative", and "Transparent".
ui5-buttonis disabled (default is set to
false). A disabled
ui5-buttoncan't be pressed or focused, and it is not in the tab chain.
ui5-button. The SAP-icons font provides numerous options.
ui5-button icon="palette"See all the available icons in the
ui5-buttonwill automatically submit the nearest form element upon
Important: For the
submitsproperty to have effect, you must add the following import to your project:
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
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
ui5-buttonis activated either with a mouse/tap or by using the Enter or Space key.
Note: The event will not be fired if the
disabledproperty is set to