All Components

Notification Types

The Notification provides built-in notification types which provide ready-to-use shorthand display methods and styling functionalities.

By default, the notification type is "info".

The available built-in notification types are:

  • "info"
  • "success"
  • "warning"
  • "error"

The shorthand method names match the input names of the notification types. You can also define an unlimited amount of custom notification types and corresponding templates. For more information on the templates, refer to the section on Notification templates.

The following example demonstrates how to apply the built-in notification types.

<div id="vueapp" class="vue-app">
    <kendo-notification ref="popupNotification"></kendo-notification>

    <button id="showPopupNotification" class="k-button" @click="showPopupNotification">As a popup at bottom-right</button>

new Vue({
        el: '#vueapp',
        methods: {
            showPopupNotification: function (e) {
                //'myMessage', 'info');
                //'myMessage', 'success');
      'myMessage', 'warning');
                //'myMessage', 'error');
        mounted: function () {
            this.popupNotificationWidget = this.$refs.popupNotification.kendoWidget();
In this article