Class ToolbarButton

packages/main/src/ToolbarButton.ts:31–241

* @class * * ### Overview * The `ui5-toolbar-button` represents an abstract action, * used in the `ui5-toolbar`. * * ### ES6 Module Import * `import "@ui5/webcomponents/dist/ToolbarButton.js";` * @constructor * @abstract * @extends ToolbarItemBase * @public * @since 1.17.0

 * @since 1.17.0
 */
@customElement({
	tag: "ui5-toolbar-button",
	template: ToolbarButtonTemplate,
	renderer: jsxRenderer,
	styles: [ToolbarButtonCss],
})

/**
 * Fired when the component 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`.
 * @public
 */
@event("click", {
	bubbles: true,
	cancelable: true,
})

class ToolbarButton extends ToolbarItemBase {
	eventDetails!: ToolbarItemBase["eventDetails"] & {
		click: ToolbarItemEventDetail,
	}

	/**
	* Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
	* the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
	* @public
	* @default "Default"
	*/
	@property()
	overflowPriority: `${ToolbarItemOverflowBehavior}` = "Default";

	/**
	 * Defines if the toolbar overflow popup should close upon interaction with the item.
	 * It will close by default.
	 * @default false
	 * @public
	 */
	@property({ type: Boolean })
	preventOverflowClosing = false;

	/**
	 * Defines if the action is disabled.
	 *
	 * **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
	 * @default false
	 * @public
	 */
	@property({ type: Boolean })
	disabled = false;

	/**
	 * Defines the action design.
	 * @default "Default"
	 * @public
	 */