New to Kendo UI for Angular? Start a free 30-day trial

ToolBarButtonComponent

Component

Represents the Kendo UI ToolBar Button tool for Angular.

Use this component to render a button inside the ToolBar.

Definition

Package:@progress/kendo-angular-toolbar

Selector:kendo-toolbar-button

Export Name:Accessible in templates as #kendoToolBarButtonInstance="kendoToolBarButton"

Syntax:

html

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

Inputs

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

Specifies the background and border styles of the Button. The default value is set by the Kendo theme.

Default:

undefined

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.

rounded

ButtonRounded

Specifies the border radius of the Button. The default value is set by the Kendo theme.

Default:

undefined

selected

boolean

Sets the selected state of the Button. Use with the toggleable property.

Default:

false

showIcon

DisplayMode

Specifies the button icon visibility. Accepts a DisplayMode value.

Default:

'always'

showText

DisplayMode

Specifies the button text visibility. Accepts a DisplayMode value.

Default:

'always'

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

Specifies the predefined theme color of the Button. The default value is set by the Kendo theme.

Default:

undefined

title

string

Specifies the title attribute of the Button.

togglable

boolean

toggleable

boolean

Provides visual styling to indicate if the Button is active (see example). For toggleable buttons, set this to true.

Default:

false

Events

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).