ToolBarButtonComponent

Represents the Kendo UI ToolBar Button tool for Angular.

Use this component to render a button inside the ToolBar.

html

<kendo-toolbar>
     <kendo-toolbar-button text="Button"></kendo-toolbar-button>
</kendo-toolbar>

Selector

kendo-toolbar-button

Export Name

Accessible in templates as #kendoToolBarButtonInstance="kendoToolBarButton"

Inputs

Name	Type	Default	Description
className	string | string[] | {[key: string]: boolean}		Specifies custom CSS class names to be added to the Button.
disabled	boolean		Disables the Button when set to true (see example).
fillMode	ButtonFillMode	'solid'	Specifies the background and border styles of the Button. Accepts a ButtonFillMode value.
icon	string		Defines the name for an existing icon in a Kendo UI theme (see example). The icon is rendered inside the Button by a span.k-icon element.
iconClass	string		Defines a CSS class or multiple classes to be applied to a span element inside the Button. Allows the usage of custom icons.
imageUrl	string		Defines a URL for an image to be rendered inside the Button. The URL can be relative or absolute.
selected	boolean	false	Sets the selected state of the Button. Use with the toggleable property.
showIcon	DisplayMode	'always'	Specifies the button icon visibility. Accepts a DisplayMode value.
showText	DisplayMode	'always'	Specifies the button text visibility. Accepts a DisplayMode value.
style	{[key: string]: string | number}		Specifies custom inline CSS styles for the Button.
svgIcon	SVGIcon		Defines an SVGIcon to be rendered within the button. Accepts either an existing Kendo SVG icon or a custom one.
text	string		Specifies the text of the Button (see example).
themeColor	ButtonThemeColor	'base'	Specifies the predefined theme color of the Button. Accepts a ButtonThemeColor value.
title	string		Specifies the title attribute of the Button.
toggleable	boolean	false	Provides visual styling to indicate if the Button is active (see example). For toggleable buttons, set this to true.

Events

Name	Type	Description
click	EventEmitter<any>	Fires each time the Button is clicked.
pointerdown	EventEmitter<any>	Fires when the Button's pointerdown event is triggered.
selectedChange	EventEmitter<any>	Fires each time the selected state of a toggleable Button is changed. The event argument is the new selected state (Boolean).