Skip to main content

Button

<ui5-button>

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.

Usage​

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.

ES6 Module Import​

import "@ui5/webcomponents/dist/Button.js";

Basic Sample​

Properties​

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

accessibleDescription​

DescriptionDefines the accessible description of the component.
Typestring | undefined
Defaultundefined
Since2.5.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​

The Button supports several designs to indicate the priority or the nature of the action.

Icon Only​

Text and Icon​

Icon at the End​

Button allows adding of second Icon at the end.

Custom Styling​

To some extent, the Button allows customization with pure CSS as shown in the sample.

Achieve Menu Button functionality.