ToolbarButton
<ui5-toolbar-button> | Since 1.17.0The ui5-toolbar-button represents an abstract action,
used in the ui5-toolbar.
ES6 Module Import
import "@ui5/webcomponents/dist/ToolbarButton.js";
Properties
disabled
| Description | Defines if the action is disabled. Note: a disabled action can't be pressed or focused, and it is not in the tab chain. |
| Type | boolean |
| Default | false |
design
| Description | Defines the action design. |
| Type | "Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention" (value descriptions in: ButtonDesign) |
| Default | "Default" |
icon
| Description | Defines the icon source URI.Note: SAP-icons font provides numerous buil-in icons. To find all the available icons, see the Icon Explorer. |
| Type | string | undefined |
| Default | undefined |
endIcon
| Description | Defines the icon, displayed as graphical element within the component after the button text. Note: It is highly recommended to use endIcon property only together with icon and/or text properties. Usage of endIcon only should be avoided.The SAP-icons font provides numerous options. Example: See all the available icons within the Icon Explorer. |
| Type | string | undefined |
| Default | undefined |
tooltip
| Description | Defines the tooltip of the component. Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function. |
| Type | string | undefined |
| Default | undefined |
accessibleName
| Description | Defines the accessible ARIA name of the component. |
| Type | string | undefined |
| Default | undefined |
accessibleNameRef
| Description | Receives id(or many ids) of the elements that label the component. |
| Type | string | undefined |
| Default | undefined |
accessibilityAttributes
| Description | Defines the additional accessibility attributes that will be applied to the component. The following fields are supported: - expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: true or false- hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values: dialog, grid, listbox, menu or tree.- controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a lowercase string value. |
| Type | ToolbarButtonAccessibilityAttributes |
| Default | {} |
text
| Description | Button text |
| Type | string | undefined |
| Default | undefined |
showOverflowText
| Description | Defines whether the button text should only be displayed in the overflow popover. When set to true, the button appears as icon-only in the main toolbar, but shows both icon and text when moved to the overflow popover.Note: This property only takes effect when the text property is also set. |
| Type | boolean |
| Default | false |
| Since | 2.17.0 |
width
| Description | Defines the width of the button. Note: all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc. |
| Type | string | undefined |
| Default | undefined |
overflowPriority
| Description | 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. |
| Type | "Default" | "NeverOverflow" | "AlwaysOverflow" (value descriptions in: ToolbarItemOverflowBehavior) |
| Default | "Default" |
preventOverflowClosing
| Description | Defines if the toolbar overflow popup should close upon intereaction with the item. It will close by default. |
| Type | boolean |
| Default | false |
Slots
default
| Description | Wrapped component slot. |
| Type | Array<IOverflowToolbarItem> |
| Since | 2.20.0 |
Events
click
| Description | 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. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
close-overflow
| Description | Fired when the overflow popover is closed. |
| Type | CustomEvent |
| Since | 1.17.0 |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.