Button

<ui5-ai-button> | Since 2.0.0

info

The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.

The ui5-ai-button component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the ui5-ai-button or by pressing keyboard keys like [Enter] or [Space].

Usage

For the ui5-ai-button user interface, you can define one or more button states by placing ui5-ai-button-state components in their default slot. Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose. You can define a split mode for the ui5-ai-button, which will results in displaying an arrow button for additional actions.

You can choose from a set of predefined designs for ui5-ai-button (as in ui5-button) to match the desired styling.

The ui5-ai-button can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space]. You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4]. To display additional actions, you can attach a menu to the arrow button.

ES6 Module Import

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

Basic Sample

Properties

design

Description	Defines the component design.
Type	"Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention" | undefined
Default	"Default"

disabled

Description	Defines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
Type	boolean
Default	false

state

Description	Defines the current state of the component.
Type	string | undefined
Default	undefined

activeArrowButton

Description	Defines the active state of the arrow button in split mode. Set to true when the button is in split mode and a menu with additional options is opened by the arrow button. Set back to false when the menu is closed.
Type	boolean
Default	false
Since	2.6.0

Slots

default

Description	Defines the available states of the component. Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use ui5-ai-button-state components in order to preserve the intended design.
Type	Array<ButtonState>

Events

click

Description	Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

arrow-click

Description	Fired when the component is in split mode and after the arrow button is activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down], [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples

AI Button With Split Mode State

Icon-only AI Button With Menu