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

Hidden Notification

By default, the Notification remains visible for five seconds before it disappears.

If the user clicks anywhere on a notification, it immediately hides. You can delay the hiding of the component by configuring this option in milliseconds. If you set a zero value, the automatic hiding is disabled. After its hiding animation is completed, the dismissed notification is removed from the DOM.

If you want to make the notification more intuitive for the end user, the component allows you to display a Close button. You can also disable the default behavior of hiding a notification by clicking anywhere on it. In this case, the user can dismiss the notification only by clicking the Close button (if present).

You can also postpone the manual hiding of a notification, which is useful when preventing the user from accidentally hiding a notification that appeared shortly before that. By default, the option to postpone the hiding of a notification is disabled.

The following example demonstrates how to manage the hidden state of the Notification.

<div id="vueapp" class="vue-app">
    <kendo-notification ref="popupNotification"
        :allow-hide-after="2000"
        :auto-hide-after="7000"
        :button="true"
        :hide-on-click="true">
    </kendo-notification>
</div>

In this article

Not finding the help you need?