React Badge

  • Even small features take time and focus if you don't have them built-in, and this React Badge will help you add a visual indicator to other UI elements in seconds.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
React Badge Container
  • Overview

    The React Badge component takes inspiration from modern user experiences across web and mobile applications alike and provides an element to indicate unread messages or notifications. With the KendoReact Badge component, you can easily attach badges to existing UI elements. It comes with built-in support for text, settings for size, positioning and overlap as well as the ability to just showcase a simple dot. The KendoReact Badge component can be added to any existing user experience with a single line of code and minimal configuration.

    See React Badge Overview demo

    React Badge Component Overview
  • Badge Container

    The KendoReact Badge is commonly used as a child component of another UI element to trigger notifications. For React components or HTML elements that are unable to have child elements, you can use the KendoReact BadgeContainer to wrap around these elements and still attach a React Badge component. This helper component ensures that any UI element in a React application can have an associated badge.

    See React Badge Container demo

    React Badge Container
  • Positioning

    The KendoReact Badge component provides several options to position the badge in relation to its parent element, whether this is an HTML element or a React component. React developers can simply use configuration options for positioning rather than complex CSS or manual calculations.

    See React Badge Positioning demo

    React Badge Component Positioning
  • Appearance

    Out of the box, the React Badge component provides several different styles that can be set through a single configuration option. Styles include, but are not limited to, info, success, warning, error and more. Additionally, the KendoReact Badge component provides settings for its shape, size, fill and border, which allows to add padding around the badge, to ensure that the React Badge component can fit any application scenario.

    See React Badge Appearance demo

    React Badge Component Appearance

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.