Kendo UI for Angular

Angular Badge

  • Add a visual indicator or icon to another Angular UI element for quick and easy UX wins. Common examples include a user’s online status or a new message count on a messaging app icon.
  • Part of the Kendo UI for Angular library along with 100+ professionally-designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a 3-million-strong developer community.
Angular UI Component Library
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    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
Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI