The 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 |
| 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 interaction 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.
CSS Custom States
For more information on how to use CSS custom states, see Usage of CSS Custom States.
| Name | Description |
|---|
| overflowed | When the item is displayed in the overflow popover. Use this state to apply different styles when the item is overflowed. Available since 2.20.0. |