Badge

Badge Overview

Badges provide additional contextual information for other user interface (UI) elements on the page. They enable you to easily show statuses, notifications, and short messages in your app.

Badges provide consistent styling. They can render arbitrary content such as text or icons. Badges are never used as a stand-alone component as they are typically included in more complex components such as buttons, menus, chats, and others.

Live Demo

Appearance

Badges provide built-in styling options that grant visually appealing and flexible rendering experience.

The Telerik and Kendo UI Badge supports alternative styling options which enable you to configure the individual aspects of its appearance.

Anatomy

The anatomy of the Badge summarizes the elements of the component.

Depending on the elements they display, the Telerik and Kendo UI Badges can be any of the following types:

• Icon Badge—Badges that display an icon are preferred inside compact components and when the space is limited. Telerik and Kendo UI Badges seamlessly accept Kendo UI font icons and FontAwesome icons.
• Text Badge—Text badges render a small chunk of text that can consist of numbers or short words.

1. Icon Badge
2. Text Badge

The next image shows the anatomy of a Badge and includes the following elements:

1. Container
2. Text label (optional)

Size

The Badge provides the size configuration option that enables you to control how big or small the rendered badge will be. Badges also provide options for size customization. 

size provides the following available options:

• small—Renders small badges, which are suitable for compact components, such as buttons, or menu items. 

  The small Telerik and Kendo UI Badges use the same typographic style as the medium badges. However, to achieve the desired height, the small badges apply a $kendo-spacing, 0.5 spacing value for their vertical and horizontal paddings.

• medium (default)—Renders medium badges.

  The medium size configuration is the base according to which the small and large options are specified. The medium Telerik and Kendo UI Badges use the same typographic style as the small badges. However, to achieve the desired height, the medium badges apply a $kendo-spacing, 1 spacing value for their vertical paddings.

• large—Renders large badges, which are suitable for adaptive components and mobile devices.

  The large Telerik and Kendo UI Badges use the same typographic style as the small and medium badges and apply a $kendo-spacing, 1.5 spacing value.

• none—Does not set a size and allows you to add your own, custom value.

1. Small
2. Medium (default)
3. Large

Color

The Badge provides the theme-color configuration option that enables you to choose among the available, built-in colors that will be applied to it. Badges also provide options for color customization.

As the Badge component is a status indicator of a given UI element, the correct choice of colors is vital as it conveys a message.

themeColor provides the following available options:

• primary (default)—Primary badges usually indicate that a change occurred and don't give additional details. They are used against neutral-colored backgrounds and make the user click the element to get more information. 
• secondary—Secondary badges are usually applied to elements in active color, for example, a toolbar in a primary color.
• tertiary—Similarly to secondary badges, tertiary badges are used against more active backgrounds.
• info—Info badges are used as notification alerts, conveying to users that new information is available. 
• success—Success badges imply positive status of an element or a successful outcome of an action, for example, an update.
• warning—Warning badges indicate significant changes which must be regarded with caution or a temporary change in the status. 
• error—Error badges indicate disruptive changes, the need of an urgent action, danger and risk, or unavailability. 
• none—Does not set a themeColor and allows you to add your own, custom value.

Fill Mode

Fill modes create a certain look-and-feel of the UI and also signify hierarchy between elements on the same page.

The Badge provides the fillMode configuration option that enables you to control the way in which color is applied to the rendered badge. Badges also provide options for fill-mode customization.

fillMode provides the following available options:

• solid (default)—On a page, a solid Badge puts the strongest emphasis as it has a border and background and draws the attention of users. 
• outline—Outline Badges have weaker emphasis as they only have a border, blend well with the rest of the content, and reduce the visual noise on the page. 

1. Solid (default)
2. Outline

Shape

The Badge provides the shape option that enables you to control the border radius of the rendered badge. The defined value for the shape significantly affects the look-and-feel of the UI. 

1. Circle
2. Rectangle
3. Rounded
4. Dot
5. Pill

Cutout Border

The Badge provides the cutoutBorder option that enables you to render an additional cutout border around its content.

The available cutoutBorder values are:

• false (Default)—Renders a badge without a cutout border.
• true—Applies a cutout border on the Badge.

1. False (default)
2. True

Positioning

As the Badge component is never used as a stand-alone component, it provides options for positioning in relation to its parent container—HTML element or another component.

Alignment

The Badge allows you to set different alignments relative to its parent container. The available align keys are:

• horizontal—Aligns the Badge horizontally to one of the following positions:

  • start—Aligns the Badge to the start point of the parent element.
  • end (Default)—Aligns the Badge to the end point of the parent element.

• vertical—Aligns the Badge vertically to one of the following positions:

  • top (Default)—Aligns the Badge to the top of the parent element.
  • bottom—Aligns the Badge to the bottom of the parent element.

1. Horizontal start
2. Horizontal end
3. Vertical top
4. Vertical bottom

Position

The Badge allows you to specify the position of the badge relative to the edge of its parent container.

The available position values are:

• edge (Default)—The center of the badge is positioned on the edge of the parent container.
• inside—The badge is positioned entirely inside the parent container.
• outside—The badge is positioned entirely outside the parent container.

1. Edge
2. Inside
3. Outside

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular BadgeFind more information about the Kendo UI for Angular Badge in the official product documentation of the component.

Kendo UI for jQuery BadgeFind more information about the Kendo UI for jQuery Badge in the official product documentation of the component.

KendoReact BadgeFind more information about the KendoReact Badge in the official product documentation of the component.

Kendo UI for Vue BadgeFind more information about the Kendo UI for Vue Badge in the official product documentation of the component.

Telerik UI for ASP.NET Core BadgeFind more information about the Telerik UI for ASP.NET Core Badge component.

Telerik UI for ASP.NET MVC BadgeFind more information about the Telerik UI for ASP.NET MVC Badge component.