class sap.m.Button

Control sample: sap.m.Button
Visiblity: public
UX Guidelines: Button
Implements: sap.ui.core.IFormContent
Available since: N/A
Module: sap/m/Button
Application Component: CA-UI5-CTR

Enables users to trigger actions.

Overview

The user triggers an action by clicking or tapping the Button or by pressing certain keyboard keys, such as Enter.

Usage

For the Button UI, you can define text, icon, or both. You can also specify whether the text or the icon is displayed first.

You can choose from a set of predefined ButtonTypes that offer different styling to correspond to the triggered action.

You can set the Button as enabled or disabled. An enabled Button can be pressed by clicking or tapping it and it changes its style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled Button appears inactive and cannot be pressed.

This control can be a drag source.

Constructor

Constructor for a new Button.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.m.Button(sId?, mSettings?)
Param Type Default Value Description
sId? string

ID for the new control, generated automatically if no ID is given

mSettings? object

Initial settings for the new control


Properties

Name Type Default Value Description
activeIcon sap.ui.core.URI

The source property of an alternative icon for the active (depressed) state of the button. Both active and default icon properties should be defined and have the same type: image or icon font. If the icon property is not set or has a different type, the active icon is not displayed.

Visibility: public
ariaHasPopup sap.ui.core.aria.HasPopup None

Specifies the value of the aria-haspopup attribute

If the value is None, the attribute will not be rendered. Otherwise it will be rendered with the selected value.

NOTE: Use this property only when a button is related to a popover/popup. The value needs to be equal to the main/root role of the popup - e.g. dialog, menu or list (examples: if you have dialog -> dialog, if you have menu -> menu; if you have list -> list; if you have dialog containing a list -> dialog). Do not use it, if you open a standard sap.m.Dialog, MessageBox or other type of dialogs displayed as on overlay over the application.

Since: 1.84.0.

Visibility: public
enabled boolean true

Determines whether the Button is enabled (default is set to true). A disabled Button has different colors depending on the ButtonType.

Visibility: public
icon sap.ui.core.URI empty string

Defines the icon to be displayed as graphical element within the Button. It can be an image or an icon from the icon font.

Visibility: public
iconDensityAware boolean true

By default, this is set to true but then one or more requests are sent trying to get the density perfect version of image if this version of image doesn't exist on the server.

If only one version of image is provided, set this value to false to avoid the attempt of fetching density perfect image.

Visibility: public
iconFirst boolean true

Determines whether the icon is displayed before the text.

Visibility: public
text string empty string

Determines the text of the Button.

Visibility: public
textDirection sap.ui.core.TextDirection Inherit

Specifies the element's text directionality with enumerated options. By default, the control inherits text direction from the DOM.

Since: 1.28.0.

Visibility: public
type sap.m.ButtonType Default

Defines the Button type.

Visibility: public
width sap.ui.core.CSSSize

Defines the Button width.

Visibility: public

Associations

Name Cardinality Type Description
ariaDescribedBy 0..n sap.ui.core.Control

Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby).

ariaLabelledBy 0..n sap.ui.core.Control

Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby).


Events Overview

Event Description
press

Fired when the user clicks or taps on the control.

tap

Fired when the user taps the control.

press

Fired when the user clicks or taps on the control.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object

tap

Fired when the user taps the control.

replaced by <code>press</code> event
Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object

Methods Overview

Method Description
addAriaDescribedBy

Adds some ariaDescribedBy into the association ariaDescribedBy.

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

attachPress

Attaches event handler fnFunction to the press event of this sap.m.Button.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Button itself.

Fired when the user clicks or taps on the control.

attachTap

Attaches event handler fnFunction to the tap event of this sap.m.Button.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Button itself.

Fired when the user taps the control.

Since 1.20 replaced by <code>press</code> event
detachPress

Detaches event handler fnFunction from the press event of this sap.m.Button.

The passed function and listener object must match the ones used for event registration.

detachTap

Detaches event handler fnFunction from the tap event of this sap.m.Button.

The passed function and listener object must match the ones used for event registration.

Since 1.20 replaced by <code>press</code> event
sap.m.Button.extend

Creates a new subclass of class sap.m.Button with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

firePress

Fires event press to attached listeners.

fireTap

Fires event tap to attached listeners.

Since 1.20 replaced by <code>press</code> event
getAccessibilityInfo

References:

  • sap.ui.core.Control#getAccessibilityInfo

getActiveIcon

Gets current value of property activeIcon.

The source property of an alternative icon for the active (depressed) state of the button. Both active and default icon properties should be defined and have the same type: image or icon font. If the icon property is not set or has a different type, the active icon is not displayed.

getAriaDescribedBy

Returns array of IDs of the elements which are the current targets of the association ariaDescribedBy.

getAriaHasPopup

Gets current value of property ariaHasPopup.

Specifies the value of the aria-haspopup attribute

If the value is None, the attribute will not be rendered. Otherwise it will be rendered with the selected value.

NOTE: Use this property only when a button is related to a popover/popup. The value needs to be equal to the main/root role of the popup - e.g. dialog, menu or list (examples: if you have dialog -> dialog, if you have menu -> menu; if you have list -> list; if you have dialog containing a list -> dialog). Do not use it, if you open a standard sap.m.Dialog, MessageBox or other type of dialogs displayed as on overlay over the application.

Default value is None.

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getEnabled

Gets current value of property enabled.

Determines whether the Button is enabled (default is set to true). A disabled Button has different colors depending on the ButtonType.

Default value is true.

getIcon

Gets current value of property icon.

Defines the icon to be displayed as graphical element within the Button. It can be an image or an icon from the icon font.

Default value is empty string.

getIconDensityAware

Gets current value of property iconDensityAware.

By default, this is set to true but then one or more requests are sent trying to get the density perfect version of image if this version of image doesn't exist on the server.

If only one version of image is provided, set this value to false to avoid the attempt of fetching density perfect image.

Default value is true.

getIconFirst

Gets current value of property iconFirst.

Determines whether the icon is displayed before the text.

Default value is true.

sap.m.Button.getMetadata

Returns a metadata object for class sap.m.Button.

getPopupAnchorDomRef

Defines to which DOM reference the Popup should be docked

getText

Gets current value of property text.

Determines the text of the Button.

Default value is empty string.

getTextDirection

Gets current value of property textDirection.

Specifies the element's text directionality with enumerated options. By default, the control inherits text direction from the DOM.

Default value is Inherit.

getType

Gets current value of property type.

Defines the Button type.

Default value is Default.

getWidth

Gets current value of property width.

Defines the Button width.

removeAllAriaDescribedBy

Removes all the controls in the association named ariaDescribedBy.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAriaDescribedBy

Removes an ariaDescribedBy from the association named ariaDescribedBy.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

setActiveIcon

Sets a new value for property activeIcon.

The source property of an alternative icon for the active (depressed) state of the button. Both active and default icon properties should be defined and have the same type: image or icon font. If the icon property is not set or has a different type, the active icon is not displayed.

When called with a value of null or undefined, the default value of the property will be restored.

setAriaHasPopup

Sets a new value for property ariaHasPopup.

Specifies the value of the aria-haspopup attribute

If the value is None, the attribute will not be rendered. Otherwise it will be rendered with the selected value.

NOTE: Use this property only when a button is related to a popover/popup. The value needs to be equal to the main/root role of the popup - e.g. dialog, menu or list (examples: if you have dialog -> dialog, if you have menu -> menu; if you have list -> list; if you have dialog containing a list -> dialog). Do not use it, if you open a standard sap.m.Dialog, MessageBox or other type of dialogs displayed as on overlay over the application.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is None.

setBadgeMaxValue

Badge maximum value setter - called when someone wants to change the value above which the badge value is displayed with + after the value (ex. 999+)

setBadgeMinValue

Badge minimum value setter - called when someone wants to change the value below which the badge is hidden.

setEnabled

Sets a new value for property enabled.

Determines whether the Button is enabled (default is set to true). A disabled Button has different colors depending on the ButtonType.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setIcon

Sets a new value for property icon.

Defines the icon to be displayed as graphical element within the Button. It can be an image or an icon from the icon font.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

setIconDensityAware

Sets a new value for property iconDensityAware.

By default, this is set to true but then one or more requests are sent trying to get the density perfect version of image if this version of image doesn't exist on the server.

If only one version of image is provided, set this value to false to avoid the attempt of fetching density perfect image.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setIconFirst

Sets a new value for property iconFirst.

Determines whether the icon is displayed before the text.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setText

Sets a new value for property text.

Determines the text of the Button.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

setTextDirection

Sets a new value for property textDirection.

Specifies the element's text directionality with enumerated options. By default, the control inherits text direction from the DOM.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Inherit.

setType

Sets a new value for property type.

Defines the Button type.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Default.

setWidth

Sets a new value for property width.

Defines the Button width.

When called with a value of null or undefined, the default value of the property will be restored.

addAriaDescribedBy

Adds some ariaDescribedBy into the association ariaDescribedBy.

Param Type DefaultValue Description
vAriaDescribedBy sap.ui.core.ID sap.ui.core.Control

The ariaDescribedBy to add; if empty, nothing is inserted

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to add; if empty, nothing is inserted

attachPress

Attaches event handler fnFunction to the press event of this sap.m.Button.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Button itself.

Fired when the user clicks or taps on the control.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.Button itself

attachTap

Attaches event handler fnFunction to the tap event of this sap.m.Button.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.m.Button itself.

Fired when the user taps the control.

Since 1.20 replaced by <code>press</code> event
Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.m.Button itself

detachPress

Detaches event handler fnFunction from the press event of this sap.m.Button.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachTap

Detaches event handler fnFunction from the tap event of this sap.m.Button.

The passed function and listener object must match the ones used for event registration.

Since 1.20 replaced by <code>press</code> event
Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.m.Button.extend

Creates a new subclass of class sap.m.Button with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

firePress

Fires event press to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

fireTap

Fires event tap to attached listeners.

Since 1.20 replaced by <code>press</code> event
Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

getAccessibilityInfo

References:

getActiveIcon

Gets current value of property activeIcon.

The source property of an alternative icon for the active (depressed) state of the button. Both active and default icon properties should be defined and have the same type: image or icon font. If the icon property is not set or has a different type, the active icon is not displayed.

getAriaDescribedBy

Returns array of IDs of the elements which are the current targets of the association ariaDescribedBy.

getAriaHasPopup

Gets current value of property ariaHasPopup.

Specifies the value of the aria-haspopup attribute

If the value is None, the attribute will not be rendered. Otherwise it will be rendered with the selected value.

NOTE: Use this property only when a button is related to a popover/popup. The value needs to be equal to the main/root role of the popup - e.g. dialog, menu or list (examples: if you have dialog -> dialog, if you have menu -> menu; if you have list -> list; if you have dialog containing a list -> dialog). Do not use it, if you open a standard sap.m.Dialog, MessageBox or other type of dialogs displayed as on overlay over the application.

Default value is None.

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getEnabled

Gets current value of property enabled.

Determines whether the Button is enabled (default is set to true). A disabled Button has different colors depending on the ButtonType.

Default value is true.

getIcon

Gets current value of property icon.

Defines the icon to be displayed as graphical element within the Button. It can be an image or an icon from the icon font.

Default value is empty string.

getIconDensityAware

Gets current value of property iconDensityAware.

By default, this is set to true but then one or more requests are sent trying to get the density perfect version of image if this version of image doesn't exist on the server.

If only one version of image is provided, set this value to false to avoid the attempt of fetching density perfect image.

Default value is true.

getIconFirst

Gets current value of property iconFirst.

Determines whether the icon is displayed before the text.

Default value is true.

sap.m.Button.getMetadata

Returns a metadata object for class sap.m.Button.

getPopupAnchorDomRef

Defines to which DOM reference the Popup should be docked

getText

Gets current value of property text.

Determines the text of the Button.

Default value is empty string.

getTextDirection

Gets current value of property textDirection.

Specifies the element's text directionality with enumerated options. By default, the control inherits text direction from the DOM.

Default value is Inherit.

getType

Gets current value of property type.

Defines the Button type.

Default value is Default.

getWidth

Gets current value of property width.

Defines the Button width.

removeAllAriaDescribedBy

Removes all the controls in the association named ariaDescribedBy.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAriaDescribedBy

Removes an ariaDescribedBy from the association named ariaDescribedBy.

Param Type DefaultValue Description
vAriaDescribedBy int sap.ui.core.ID sap.ui.core.Control

The ariaDescribedBy to be removed or its index or ID

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy int sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to be removed or its index or ID

setActiveIcon

Sets a new value for property activeIcon.

The source property of an alternative icon for the active (depressed) state of the button. Both active and default icon properties should be defined and have the same type: image or icon font. If the icon property is not set or has a different type, the active icon is not displayed.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sActiveIcon sap.ui.core.URI

New value for property activeIcon

setAriaHasPopup

Sets a new value for property ariaHasPopup.

Specifies the value of the aria-haspopup attribute

If the value is None, the attribute will not be rendered. Otherwise it will be rendered with the selected value.

NOTE: Use this property only when a button is related to a popover/popup. The value needs to be equal to the main/root role of the popup - e.g. dialog, menu or list (examples: if you have dialog -> dialog, if you have menu -> menu; if you have list -> list; if you have dialog containing a list -> dialog). Do not use it, if you open a standard sap.m.Dialog, MessageBox or other type of dialogs displayed as on overlay over the application.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is None.

Param Type DefaultValue Description
sAriaHasPopup sap.ui.core.aria.HasPopup None

New value for property ariaHasPopup

setBadgeMaxValue

Badge maximum value setter - called when someone wants to change the value above which the badge value is displayed with + after the value (ex. 999+)

Param Type DefaultValue Description
iMax number

maximum visible value of the badge (not greater than maximum Badge value - 9999)

setBadgeMinValue

Badge minimum value setter - called when someone wants to change the value below which the badge is hidden.

Param Type DefaultValue Description
iMin number

minimum visible value of the badge (not less than minimum Badge value - 1)

setEnabled

Sets a new value for property enabled.

Determines whether the Button is enabled (default is set to true). A disabled Button has different colors depending on the ButtonType.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bEnabled boolean true

New value for property enabled

setIcon

Sets a new value for property icon.

Defines the icon to be displayed as graphical element within the Button. It can be an image or an icon from the icon font.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

Param Type DefaultValue Description
sIcon sap.ui.core.URI ""

New value for property icon

setIconDensityAware

Sets a new value for property iconDensityAware.

By default, this is set to true but then one or more requests are sent trying to get the density perfect version of image if this version of image doesn't exist on the server.

If only one version of image is provided, set this value to false to avoid the attempt of fetching density perfect image.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bIconDensityAware boolean true

New value for property iconDensityAware

setIconFirst

Sets a new value for property iconFirst.

Determines whether the icon is displayed before the text.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bIconFirst boolean true

New value for property iconFirst

setText

Sets a new value for property text.

Determines the text of the Button.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

Param Type DefaultValue Description
sText string ""

New value for property text

setTextDirection

Sets a new value for property textDirection.

Specifies the element's text directionality with enumerated options. By default, the control inherits text direction from the DOM.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Inherit.

Param Type DefaultValue Description
sTextDirection sap.ui.core.TextDirection Inherit

New value for property textDirection

setType

Sets a new value for property type.

Defines the Button type.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Default.

Param Type DefaultValue Description
sType sap.m.ButtonType Default

New value for property type

setWidth

Sets a new value for property width.

Defines the Button width.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sWidth sap.ui.core.CSSSize

New value for property width