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.
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:
- When targeting text, HTML tags or React components that can have children, place the Badge as a child. For example, check the
main.jsxfile in the sample below. - When targeting text, HTML tags, or React components that cannot have children, use a
BadgeContainercomponent to wrap both the targeted element and the Badge. For example, check thesocial-apps.jsxandcontacts.jsxfiles in the sample below.
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.
