Skip to main content

Button

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​