Skip to main content

ToolbarButton

The ui5-toolbar-button represents an abstract action, used in the ui5-toolbar.

ES6 Module Import​

import "@ui5/webcomponents/dist/ToolbarButton.js";

Properties​

disabled​

DescriptionDefines if the action is disabled.
Note: a disabled action can't be pressed or focused, and it is not in the tab chain.
Typeboolean
Defaultfalse

design​

DescriptionDefines the action design.
Type"Default" | "Positive" | "Negative" | "Transparent" | "Emphasized" | "Attention"
Default"Default"

icon​

DescriptionDefines the icon source URI.
Note: SAP-icons font provides numerous buil-in icons. To find all the available icons, see the Icon Explorer.
Typestring
Default""

iconEnd​

DescriptionDefines whether the icon should be displayed after the component text.
Typeboolean
Defaultfalse

tooltip​

DescriptionDefines the tooltip of the component.
Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
Typestring
Default""

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the component.
Typestring
Default""

accessibilityAttributes​

DescriptionAn object of strings that defines several additional accessibility attribute values for customization depending on the use case.
It supports the following fields:
- expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
- true
- 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
- Tree
- controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
TypeAccessibilityAttributes
Default

text​

DescriptionButton text
Typestring
Default""

width​

DescriptionDefines the width of the button.
Note: all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
Typestring | undefined
Defaultundefined

overflowPriority​

DescriptionProperty 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"
Default"Default"

preventOverflowClosing​

DescriptionDefines if the toolbar overflow popup should close upon intereaction with the item. It will close by default.
Typeboolean
Defaultfalse

Slots​

No slots available for this component.

Events​

click​

DescriptionFired 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.
TypeCustomEvent

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.