UI5 Web Components
Search
Button
@ui5/webcomponents
<ui5-button>

Basic Button

Default Disabled Cancel Approve Decline Warning Subscribe 
<ui5-button design="Default">Default</ui5-button>
<ui5-button disabled>Disabled</ui5-button>
<ui5-button design="Transparent">Cancel</ui5-button>
<ui5-button design="Positive">Approve</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<ui5-button design="Attention">Warning</ui5-button>
<ui5-button design="Emphasized">Subscribe</ui5-button>

Button with Icon

Add Download Add Remove Warning Accept 
<ui5-button icon="employee">Add</ui5-button>
<ui5-button icon="download" icon-end>Download</ui5-button>
<ui5-button design="Positive" icon="add">Add</ui5-button>
<ui5-button design="Negative" icon="delete">Remove</ui5-button>
<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>
<ui5-button design="Transparent" icon="accept">Transparent</ui5-button>

Icon Only Button

<ui5-button icon="away" tooltip="Away" accessible-name-ref="lblAway"></ui5-button>
<ui5-button icon="action-settings" tooltip="Action settings" accessible-name-ref="lblSettings" ></ui5-button>
<ui5-button icon="add" tooltip="Add" accessible-name-ref="lblAdd"></ui5-button>
<ui5-button icon="alert"tooltip="Alert"  accessible-name-ref="lblAlert"></ui5-button>
<ui5-button icon="accept" tooltip="Accept" design="Positive" accessible-name-ref="lblAccept"></ui5-button>
<ui5-button icon="bookmark" tooltip="Bookmark" design="Positive" accessible-name-ref="lblBookmark"></ui5-button>
<ui5-button icon="cancel" tooltip="Cancel" design="Negative" accessible-name-ref="lblCancel" ></ui5-button>
<ui5-button icon="call" tooltip="Call" design="Negative" accessible-name-ref="lblCall" ></ui5-button>
<ui5-button icon="camera" tooltip="Camera" design="Transparent" accessible-name-ref="lblCamera"></ui5-button>
<ui5-button icon="cart" tooltip="Cart" design="Transparent" accessible-name-ref="lblCart"></ui5-button>

Button with Design

Submit Agree Decline Default Warning Transparent 
<ui5-button design="Emphasized">Submit</ui5-button>
<ui5-button design="Positive">Agree</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<ui5-button design="Default">Default</ui5-button>
<ui5-button design="Attention">Warning</ui5-button>
<ui5-button design="Transparent">Transparent</ui5-button>

Overview

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.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-button exposes the following CSS Shadow Parts:
  • button - Used to style the native button element

ES6 Module Import

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

Properties/Attributes

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.

Name
Type
Default Value
Description
accessibilityAttributes
object
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.
since v1.2.0
accessibleName
accessible-name
string
undefined
Defines the accessible ARIA name of the component.
since v1.0.0-rc.15
accessibleNameRef
accessible-name-ref
string
""
Receives id(or many ids) of the elements that label the component.
since v1.1.0
design
ButtonDesign
"Default"
Defines the component design.

The available values are:
  • Default
  • Emphasized
  • Positive
  • Negative
  • Transparent
  • Attention
disabled
boolean
false
Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
icon
string
""
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.
iconEnd
icon-end
boolean
false
Defines whether the icon should be displayed after the component text.
submits
boolean
false
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";
tooltip
string
""
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.
since v1.2.0

Slots

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 default slot.

Slot
Type
Description
default
Node [0..n]
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.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
click
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.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel