Class Button

packages/main/src/Button.ts:109–773

* @class * * ### Overview * * The `ui5-button` component represents a simple push button. * It enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing * certain keyboard keys, such as Enter. * * ### Usage * * For the `ui5-button` UI, you can define text, ic

 * @public
 */
@customElement({
	tag: "ui5-button",
	formAssociated: true,
	languageAware: true,
	renderer: jsxRenderer,
	template: ButtonTemplate,
	styles: buttonCss,
	shadowRootOptions: { delegatesFocus: true },
})
/**
 * 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`.
 *
 * @since 2.10.0
 * @public
 * @param {Event} originalEvent Returns original event that comes from user's **click** interaction
 * @param {boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
 * @param {boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
 * @param {boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
 * @param {boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
 */
@event("click", {
	bubbles: true,
	cancelable: true,
})
/**
 * Fired whenever the active state of the component changes.
 * @private
 */
@event("active-state-change", {
	bubbles: true,
	cancelable: true,
})
class Button extends UI5Element implements IButton {
	eventDetails!: {
		"click": ButtonClickEventDetail,
		"active-state-change": void,
	};

	/**
	 * Defines the component design.
	 * @default "Default"
	 * @public
	 */
	@property()
	design: `${ButtonDesign}` = "Default";

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