---
title: Usage
position: 2
seo_title: Guidelines for Using the Badge Component
seo_description: Get the knack of the Telerik and Kendo UI Badge and learn how
  to use the fill modes, label text and width, sizing and alignment options of
  the component by following the instructions and recommendations in the user
  guidelines created by our designers.
---
## Usage Guidelines

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

### Text Label Length

The Badge is a simple and compact component for use in a limited space in the context of more complex components. When it includes a text label, make sure it fits into the dedicated space. If it doesn’t fit, the text must truncate, and a Tooltip must appear upon hover.

<DosDonts>
<Do description="Use a Tooltip if the text is longer that the available space.">![A Telerik and Kendo UI Badge with a toolitp displayed on hover.](images/components-badge-usage-text-label-lenght-do.png "A Telerik and Kendo UI Badge with a toolitp displayed when hovering over the component.")</Do>
<Dont description="Avoid abbreviating the text label of the Badge as it can get misleading.">![A Telerik and Kendo UI Badge with shortened text label.](images/components-badge-usage-text-label-lenght-dont.png "Do not render Telerik and Kendo UI Badges with abbreviated text labels.")</Dont>
</DosDonts>


### Appearance

The Badge is usually smaller than the other components on the page and does not have states because users cannot interact with it.

When setting the size and the theme color of the Badge, make sure that it doesn't resemble other components, like the Button, for example.

<DosDonts>
<Do description="Use the properties of the Badge to differentiate it from the other components on the page.">![A Telerik and Kendo UI Badge in a prominent color that differentiates the Badge from the Button inside the same container.](images/components-badge-usage-appearance-do.png "Use the available colors, sizes,and fill modes to distinguish the Telerik and Kendo UI Badge from the other components in the UI.")</Do>
<Dont description="Avoid using size and color options that can lead to visual confusion.">![A Telerik and Kendo UI Badge in the same color as the Button used within the same container.](images/components-badge-usage-appearance-dont.png "Do not use the same colors for different components with different purposes and emphasis.")</Dont>
</DosDonts>


### Color

As the Badge is used as an indicator, its color must be precise and relevant to the message that the badge conveys.

<DosDonts>
<Do description="Use the colors wisely and according to the meaning that the Badge implies.">![A Telerik and Kendo UI Badge demonstrating a proper usage of color.](images/components-badge-usage-color-do.png "Use colors for the Telerik and Kendo UI Badge according to the meaning they imply.")</Do>
<Dont description="Avoid using arbitrary colors that would not match the message that the Badge conveys.">![A Telerik and Kendo UI Badge demonstrating an improper isage of a semantic color.](images/components-badge-usage-color-dont.png "Do not use аrbitrary colors to convey an important message.")</Dont>
</DosDonts>