Skip to main content

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 represents a button used in AI-related scenarios. It enables users to trigger actions by clicking or tapping the ui5-ai-button, or by pressing certain keyboard keys, such as Enter.

Usage​

For the ui5-ai-button UI, you can define one or more states of the button by placing ai-button-state components in its default slot. Each state have a name that identifies it and can have text, icon and end icon defined (in any combination) depending on the state purpose.

You can choose from a set of predefined designs (the same as for regular ui5-button component) that allow different styling to correspond to the triggered action.

ui5-ai-button can be activated by clicking or tapping it. The state can be changed in click event handler.

ES6 Module Import​

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

AI Button with Menu in one of the states​

Properties​

design​

DescriptionDefines the component design.
Type"Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention" | undefined
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

state​

DescriptionDefines the current state of the component.
Typestring | undefined
Defaultundefined

Slots​

default​

DescriptionDefines 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.
TypeArray<ButtonState>

Events​

click​

DescriptionFired when the component is activated either with a mouse/tap or by using the Enter or Space key.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Icon-only AI Button with Menu in one of the states​