@Component({
selector: 'my-app',
template: `
 <kendo-splitbutton [data]="data" icon="paste"
     (itemClick)="onSplitButtonItemClick($event)"
     (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
`
})

class AppComponent {
  public data: Array<any> = [{
      text: 'Keep Text Only',
      icon: 'paste-plain-text',
      click: () => { console.log('Keep Text Only click handler'); }
  }, {
      text: 'Paste as HTML',
      icon: 'paste-as-html'
  }, {
      text: 'Paste Markdown',
      icon: 'paste-markdown'
  }, {
      text: 'Set Default Paste'
  }];

  public onSplitButtonClick(dataItem: any): void {
      console.log('Paste');
  }

  public onSplitButtonItemClick(dataItem: any): void {
      if (dataItem) {
          console.log(dataItem.text);
      }
  }
}

Selector

kendo-splitbutton

Export Name

Accessible in templates as #kendoSplitButtonInstance="kendoSplitButton"

Inputs

Name	Type	Description
arrowButtonClass	`any`	The CSS classes that will be rendered on the button which opens the popup. Supports the type of values that are supported by `ngClass`.
arrowButtonIcon	`string`	Specifies the name of the font icon that will be rendered for the button which opens the popup.
buttonClass	`any`	The CSS classes that will be rendered on the main button. Supports the type of values that are supported by `ngClass`.
icon	`string`	Defines an icon to be rendered next to the button text (see example).
iconClass	`string`	Defines an icon with a custom CSS class to be rendered next to the button text (see example).
imageUrl	`string`	Defines the location of an image to be displayed next to the button text (see example).
size	`ButtonSize`	The size property specifies the padding of the SplitButton (see example). The possible values are: `small` `medium` (default) `large` `none`
tabIndex	`number`	Specifies the `tabIndex` of the component.
text	`string`	Sets the text of the SplitButton.
textField	`string`	Configures the text field of the button-list popup.
themeColor	`ButtonThemeColor`	The SplitButton allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly (see example). The possible values are: `base` —Applies coloring based on the `base` theme color. (default) `primary` —Applies coloring based on the `primary` theme color. `secondary`—Applies coloring based on the `secondary` theme color. `tertiary`— Applies coloring based on the `tertiary` theme color. `info`—Applies coloring based on the `info` theme color. `success`— Applies coloring based on the `success` theme color. `warning`— Applies coloring based on the `warning` theme color. `error`— Applies coloring based on the `error` theme color. `dark`— Applies coloring based on the `dark` theme color. `light`— Applies coloring based on the `light` theme color. `inverse`— Applies coloring based on the `inverse` theme color. `none`— Removes the built in theme color.
type	`string`	Defines the type attribute of the main button
data	`any`	Sets the data of the SplitButton. The data has to be provided in an array-like list.
disabled	`boolean`	When set to `true`, disables a SplitButton item (see example).
fillMode	`ButtonFillMode`	The fillMode property specifies the background and border styles of the SplitButton (see example). The available values are: `solid` (default) `flat` `outline` `link`
popupSettings	`PopupSettings`	Configures the popup of the SplitButton. The available options are: `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled. `popupClass: String`—Specifies a list of CSS classes that are used to style the popup. `appendTo: "root" \| "component" \| ViewContainerRef`—Specifies the component to which the popup will be appended. `align: "left" \| "center" \| "right"`—Specifies the alignment of the popup.
rounded	`ButtonRounded`	The rounded property specifies the border radius of the SplitButton (see example). The possible values are: `small` `medium` (default) `large` `full` `none`

Fields

Name	Type	Default	Description
itemTemplate	`ButtonItemTemplateDirective`		An item template that helps to customize the item content.
isOpen	`boolean`		Returns the current open state of the popup.

Events

Name	Type	Description
buttonClick	`EventEmitter<any>`	Fires each time the user clicks the main button. @Component({ selector: 'my-app', template: ` <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data"> Reply </kendo-splitbutton> ` }) class AppComponent { public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete']; public onSplitButtonClick(): void { console.log('SplitButton click'); } }
close	`EventEmitter<PreventableEvent>`	Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open.
itemClick	`EventEmitter<any>`	Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item. @Component({ selector: 'my-app', template: ` <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data"> Reply </kendo-splitbutton> ` }) class AppComponent { public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete']; public onSplitButtonItemClick(dataItem?: string): void { if (dataItem) { console.log(dataItem); } } }
blur	`EventEmitter<any>`	Fires each time the SplitButton gets blurred.
focus	`EventEmitter<any>`	Fires each time the SplitButton gets focused.
open	`EventEmitter<PreventableEvent>`	Fires each time the popup is about to open. This event is preventable. If you cancel the event, the popup will remain closed.

Methods

blur
Blurs the SplitButton component.

focus
Focuses the SplitButton component.

toggle

Toggles the visibility of the popup. If the toggle method is used to open or close the popup, the open and close events will not be fired.

Parameters
open	`boolean`	The state of the popup.

SplitButtonComponent

Selector

Export Name

Inputs

arrowButtonClass

arrowButtonIcon

buttonClass

icon

iconClass

imageUrl

size

tabIndex

text

textField

themeColor

type

data

disabled

fillMode

popupSettings

rounded

Fields

itemTemplate

isOpen

Events

buttonClick

close

itemClick

blur

focus

open

Methods

blur

focus

toggle

In this article

Not finding the help you need?

Getting Started

Support Resources

Community