The Ignite UI for Angular Badge is an absolutely positioned element that can be used to decorate avatars, navigation menus, or other components in the app that require an active indicator. Badges can display an active count, and can be designed as icons with a predefined style to communicate information, success, warnings, or errors.

Badge Demo


<igx-badge value="8"></igx-badge>


Using igx-badge with the igx-avatar component to show active status.

<igx-avatar [src]="src" [roundShape]="true">
    <igx-badge type="info" value="8"></igx-badge>

API Summary

Name Type Description
type string Set the type of the badge to either default, info, success, warning, or error. This will change the background color of the badge according to the values set in the default theme.
position string Set the position of the badge relative to its parent container to either top-right, top-left, bottom-right, or bottom-left.
value string Set the value to be displayed inside the badge.
icon string Set an icon for the badge from the material icons set. Will not be displayed if value for the badge is already set.