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].
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.
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.
Defines the additional accessibility attributes that will be applied to the component. This property allows for fine-tuned control of ARIA attributes for screen reader support. It accepts an object with the following optional fields: - root: Accessibility attributes that will be applied to the root element. - hasPopup: Indicates the availability and type of interactive popup element (such as a menu or dialog). Accepts string values: "dialog", "grid", "listbox", "menu", or "tree". - roleDescription: Defines a human-readable description for the button's role. Accepts any string value. - arrowButton: Accessibility attributes that will be applied to the arrow (split) button element. - hasPopup: Indicates the type of popup triggered by the arrow button. Accepts string values: "dialog", "grid", "listbox", "menu", or "tree". - expanded: Indicates whether the popup controlled by the arrow button is currently expanded. Accepts boolean values: true or false.
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.
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.