Kendo UI for Angular

Angular Badge

  • Add a visual indicator or icon to another Angular UI element for quick and easy UX wins.
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
  • Attach Notifications to UI Elements

    Use the Kendo UI Badge component to easily show statuses, notifications, and short messages in the context of other UI elements. A popular use case is showing the online status of a user overlayed on their avatar.

    See the Angular Badge demo.

    Angular Badge - Overview
  • Badge Container

    The Badge Container component solves a common problem. Sometimes elements cannot host content, making it impossible to add a badge. BadgeContainer wraps the HTML element to make it possible to add a badge.

    See the Angular Badge container demo.

  • Align and Position

    Layout your badge any way you like with options for alignment, such as bottom and start, and position, such as inside and edge.

    See the Angular Badge align and position demo.

    Angular Badge - Align & Position
  • Appearance

    Styling the Angular Badge component is simple with options such as theme color, shape, size, fill, and border.

    See the Angular Badge appearance demo.

    Angular Badge - Appearance

All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka