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);
}

Return to Programming Guide