KendoReact Badge Overview

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 KendoReact Badge is distributed through the kendo-react-indicators NPM package.

ninja-iconThe Badge is part of KendoReact, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The Badge position is determined by its parent element. Depending on the presence of child elements for your React component or HTML element, there are two possible approaches:

  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.
Change Theme
Theme
Loading ...

The Badge is part of the KendoReact Indicators component library. The procedures for installing, importing, and using the Indicators are identical for all components in the package. To learn how to use the Badge and the rest of the Indicators, see the Getting Started with the KendoReact Indicators guide.

Key Features

  • Badge Container—You can use the KendoReact Badge Container to position and wrap the Badge component.
  • Positioning—You can position the KendoReact Badge in relation to its parent container.
  • Appearance—You can quickly style the Badge by choosing from the predefined styling options.
In this article
Key FeaturesSuggested Links
Not finding the help you need?
Contact Support