---
title: Usage
position: 2
seo_title: Guidelines for Using the Notification Component
seo_description: Get the knack of the Telerik and Kendo UI Notification and
  learn how to use it by following the instructions and recommendations in the
  user guidelines created by our designers.
---
## Usage Guidelines

The Telerik and Kendo UI Notification requires you to follow some basic principles when using the component.

### Message

The Notification must provide a clear and unambiguous message that is meant to help the user take an action. Preferably, the text must be short, but if this is not possible, it must wrap to another line.

<DosDonts>
<Do description="Use a clear and unambiguous message to help the user take action.">![A Telerik and Kendo UI Notification with a clear and unambiguous message that provides all the necessary information.](images/components-notification-usage-message-do.png "Render Telerik and Kendo UI Notifications with a clear and unambiguous message that provides all the necessary information.")</Do>
<Dont description="Avoid using vague and unclear text that does not provide enough information.">![Inaccurate use of a Telerik and Kendo UI Notification with a short and vague message that does not provide enough information.](images/components-notification-usage-message-dont.png "Do not render Telerik and Kendo UI Notification with a short and vague message that does not provide enough information.")</Dont>
</DosDonts>


### Colors

The message that the Notification conveys highly relies on the alert colors that the component uses. These colors have semantic meanings that are mutually exclusive and must never be interchanged.

<DosDonts>
<Do description="Use the provided theme colors to signify the severity and the meaning of the message.">![A Telerik and Kendo UI Notification displaying a message corresponding to the applied semantic color](images/components-notification-usage-colors-do.png "Use A Telerik and Kendo UI Notification with theme colors that are in tune with the included message.")</Do>
<Dont description="Avoid replacing the semantic colors when styling the Notification as it may cause severe miscommunication.">![Inaccurate use of a Telerik and Kendo UI Notification caused by the mismatch of the message and the applied semantic color](images/components-notification-usage-colors-dont.png "Do not interchange the semantic colors that you apply to the Telerik and Kendo UI Notification as this can lead to confusion.")</Dont>
</DosDonts>


### Exclusivity

The Notification must be used sparingly on the page as it has a strong emphasis. It immediately draws the user’s attention and using it multiple times can lead to distraction, lower productivity, or even irritation.

<DosDonts>
<Do description="Use the Notification sparingly for important messages that need the user’s attention.">![A Telerik and Kendo UI Notification demonstrating the usage of color options depending on the meaning of the message it conveys.](images/components-notification-usage-exclusivity-do.png "Use the color options of the Telerik and Kendo UI Notification according to the meaning of the message it conveys.")</Do>
<Dont description="Avoid using multiple notifications as it may distract and annoy the user.">![Inaccurate use of two Telerik and Kendo UI Notifications in different colors containing information that can be merged into a single Notification.](images/components-notification-usage-exclusivity-dont.png "Do not use multiple Notifications for information that can be merged into a single Notification.")</Dont>
</DosDonts>


### Placement

Notifications must not hide important content or affect the user’s productivity and workflow. They are usually placed at the top or the bottom of the page.

<DosDonts>
<Do description="Depending on the layout, place the Notification at the top or the bottom of the page.">![A Telerik and Kendo UI Notification that is placed at the top of the page and does not affect the content visibility.](images/components-notification-usage-placement-do.png "Place the Telerik and Kendo UI Notification at the top or the bottom of the page according to the layout so it does not affect the visibility of the content.")</Do>
<Dont description="Avoid hiding the content and disturbing the user’s workflow when using a Notification.">![Incorrect use of a Telerik and Kendo UI Notification placed in a way that hides the content.](images/components-notification-usage-placement-dont.png "Do not place the Telerik and Kendo UI Notification in a way that affects the content visibility and disrupts the workflow.")</Dont>
</DosDonts>