Buttons

Template.

<kendo-button class="k-outline" type="button">
  <span class="k-icon k-i-search"></span>
</kendo-button>

However, the k-outline class makes it look plain compared to other options. See official documentation. See list of icons here.

Add a tooltip:

<kendo-tooltip title="Tooltip Label" :position="'top'">
  <kendo-button>
    ...
  </kendo-button>
</kendo-tooltip>

OK-Cancel button placement order. Use the Windows-style with [ OK ] [ Cancel ] button placement rather than [ Cancel ] [ OK ].

Focus event. Add ref="fooButton" and then call

(this.$refs.fooButton as any).$el.focus().

Keydown event. The Kendo button only exposes the click event so you need to use a ref attribute and use the native JavaScript API to add the listener:

(this.$refs.fooButton as any).$el.removeEventListener('keydown', this.onKeyDownFooButton);
(this.$refs.fooButton as any).$el.addEventListener('keydown', this.onKeyDownFooButton);

The removeEventListener() call is to ensure that the same event listener is not added twice.

Tab navigation. See [Tab Key Navigation] section. To navigate away from the button, define the keydown event handler:

private onKeyDownFooButton(e: KeyboardEvent) {

 this.emulateTab(
   e,
   () => {
     (this.$refs.barField as any).$el.focus();
     (this.$refs.barField as any).$el.select();
   },
   () => {
     (this.$refs.bazField as any).$el.focus();
     (this.$refs.bazField as any).$el.select();
   });
 }

Then define a method to set the keydown event listener on the button and call it in mounted() callback: private initializeKeyDownEvents() {

 (this.$refs.fooButton as any).$el.parentNode.removeEventListener('keydown', this.onKeyDownFooButton);
 (this.$refs.fooButton as any).$el.parentNode.addEventListener('keydown', this.onKeyDownFooButton);

}