Button
@ui5/webcomponents
<ui5-button>

Basic Button

Enabled Disabled Cancel Approve Decline Subscribe
<ui5-button design="Default">Enabled</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="Emphasized">Subscribe</ui5-button>
	

Button with Icon

Add Download Add Remove 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="Transparent" icon="accept">Transparent</ui5-button>
	

Icon Only Button

<ui5-button icon="away" aria-labelledby="lblAway"></ui5-button>
<ui5-button icon="action-settings" aria-labelledby="lblSettings" ></ui5-button>
<ui5-button icon="add" aria-labelledby="lblAdd"></ui5-button>
<ui5-button icon="alert" aria-labelledby="lblAlert"></ui5-button>
<ui5-button icon="accept" design="Positive" aria-labelledby="lblAccept"></ui5-button>
<ui5-button icon="bookmark" design="Positive" aria-labelledby="lblBookmark"></ui5-button>
<ui5-button icon="cancel" design="Negative" aria-labelledby="lblCancel" ></ui5-button>
<ui5-button icon="call" design="Negative" aria-labelledby="lblCall" ></ui5-button>
<ui5-button icon="camera" design="Transparent" aria-labelledby="lblCamera"></ui5-button>
<ui5-button icon="cart" design="Transparent" aria-labelledby="lblCart"></ui5-button>
<ui5-label style="display:none" id="lblAdd" aria-hidden="true">Add</ui5-label>
	

Button with Design

Submit Agree Decline Disabled Transparent
<ui5-button design="Emphasized">Submit</ui5-button>
<ui5-button design="Positive">Agree</ui5-button>
<ui5-button design="Negative">Decline</ui5-button>
<ui5-button disabled>Disabled</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.

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
design
ButtonDesign
"Default"
Defines the ui5-button design.

Note: Available options are "Default", "Emphasized", "Positive", "Negative", and "Transparent".
disabled
boolean
false
Defines whether the ui5-button is disabled (default is set to false). A disabled ui5-button can't be pressed or focused, and it is not in the tab chain.
icon
string
""
Defines the icon to be displayed as graphical element within the ui5-button. The SAP-icons font provides numerous options.

Example:
ui5-button icon="palette"
See all the available icons in the Icon Explorer.
iconEnd
icon-end
boolean
false
Defines whether the icon should be displayed after the ui5-button text.
iconSize
icon-size
string
undefined
Defines the size of the icon inside the ui5-button.
since v1.0.0-rc.8
submits
boolean
false
When set to true, the ui5-button will automatically submit the nearest form element upon press.

Important: For the submits property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

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 ui5-button.

Note: –źlthough 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 ui5-button 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: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel