Getting Started with KendoReact Badge

The Badge component is a visual indicator for UI elements. It enables you to easily show statuses, notifications and short messages in your app. Badges provide additional contextual information for other elements on the page.

The Badge Component is part of KendoReact, a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

Basic Usage

The Badge position is determined by its parent element. There are two approaches that you can take in case you have a React component (or HTML element) that may have children or may not.

  1. When targeting text, HTML tags or React components that can have children, place the Badge as a child. For example, check the main.jsx file in the sample below.
  2. When targeting text, HTML tags or React components that cannot have children, use a BadgeContainer component to wrap both the targeted element and the Badge. For example, check the social-apps.jsx and contacts.jsx files in the sample below.
View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features

In this article

Not finding the help you need?