Angular Badge Component Overview

    Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

    Angular Badge Example

    Getting Started with Ignite UI for Angular Badge

    To get started with the Ignite UI for Angular Badge component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    The next step is to import the IgxBadgeModule in your app.module.ts file.

    // app.module.ts

...
import { IgxBadgeModule } from 'igniteui-angular';
// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxBadgeModule],
    ...
})
export class AppModule {}

    Alternatively, as of 16.0.0 you can import the IgxBadgeComponent as a standalone dependency.

    // home.component.ts

...
import { IgxBadgeComponent } from 'igniteui-angular';
// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxBadgeComponent]
})
export class HomeComponent {}

    Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the igx-badge component.

    Using the Angular Badge Component

    Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, we need to import the IgxAvatarModule, along with the IgxBadgeModule:

    // app.module.ts
...
import { IgxBadgeModule, IgxAvatarModule } from 'igniteui-angular';
// import {  IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  ...
  imports: [..., IgxBadgeModule, IgxAvatarModule],
  ...
})

export class AppModule {}

    Alternatively, as of 16.0.0 you can import the IgxBadgeComponent and IgxAvatarComponent as standalone dependencies.

    Next, we will add those components to our template:

    <div class="wrapper">
    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
    <igx-badge icon="check" type="success"></igx-badge>
</div>

    Using the wrapper, we will position the badge absolutely, covering a little bit of the avatar:

    .wrapper {
  position: relative;
  margin-top: 15px;
}

igx-badge {
  position: absolute;
  bottom: 0;
  left: 28px;
}

    Badge Shape

    We can change the badge shape through the shape attribute setting its value to square. By default, the shape of the badge is rounded.

    <igx-badge icon="check" type="success" shape="square"></igx-badge>

    If everything's done right, you should see the demo sample shown above in your browser.

    Badge Size

    The size of the badge can be controlled using the --size variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the caption typography style for its font-size and line-height. For that reason, when setting the --size of a badge containing text to values below 16px, you will also need to modify its typography.

    Example:

    igx-badge {
  --size: 12px;

  font-size: calc(var(--size) / 2);
  line-height: normal;
}

    Badge Icon

    In addition to material icons, the igx-badge component also supports usage of Material Icons Extended and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it:

    export class BadgeIconComponent implements OnInit { 
    constructor (protected _iconService: IgxIconService) {}

    public ngOnInit() {
        this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
    }
}

    Then, just specify the icon name and family as follows:

    <igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>

    Badge in List

    Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the igx-badge and igx-avatar components. For a container, igx-list is used.

    To continue, include all needed modules and import them in the app.module.ts file.

    // app.module.ts

...
import {
    IgxListModule,
    IgxAvatarModule,
    IgxBadgeModule
} from 'igniteui-angular';
// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
})
export class AppModule {}
    Note

    The igx-badge has icon and type inputs to configure the badge look. You can set the icon by providing its name from the official material icons set. The badge type can be set to either default, info, success, warning, or error. Depending on the type, a specific background color is applied.

    In our sample, icon and type are bound to model properties named icon and type.

    Next, we're adding the contacts in our template:

    <!-- contacts.component.html -->

<igx-list>
  <igx-list-item isHeader="true">
    Team Members (4)
  </igx-list-item>
  <igx-list-item *ngFor="let member of members">
    <div class="wrapper">
      <div>
        <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
      </div>
      <div class="contact-container">
        <span class="contact-name">{{ member.name }}</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>

    We're going to create our members in the typescript file like this:

    // contacts.component.ts

...
 public members: Member[] = [
    new Member('Terrance Orta', 'online'),
    new Member('Donna Price', 'online'),
    new Member('Lisa Landers', 'away'),
    new Member('Dorothy H. Spencer', 'offline'),
  ];


    
...
class Member {
    public name: string;
    public status: string;
    public type: string;
    public icon: string;

    constructor(name: string, status: string) {
        this.name = name;
        this.status = status;
        switch (status) {
            case 'online':
                this.type = 'success';
                this.icon = 'check';
                break;
            case 'away':
                this.type = 'warning';
                this.icon = 'schedule';
                break;
            case 'offline':
                this.type = 'error';
                this.icon = 'remove';
                break;
        }
    }
}

    Position the badge in its parent container:

    /* contacts.component.css */

.wrapper {
    display: flex;
    flex-direction: row;
}

.contact-name {
    font-weight: 600;
}

.contact-container {
    margin-left: 20px;
}

.badge-style {
  position: absolute;
  bottom: 2.5px;
  left: 40px;
}

    If the sample is configured properly, a list of members should be displayed and every member has an avatar and a badge, showing its current state.

    Styling

    To get started with styling the badges, we need to import the index file, where all the theme functions and component mixins live:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Following the simplest approach, we create a new theme that extends the badge-theme and accepts some parameters that style the badge's items.

    $custom-badge-theme: badge-theme(
  $border-radius: 15px,
  $icon-color: white,
  $text-color: black,
);

    To include the new theme we use the css-vars mixin:

    @include css-vars($custom-badge-theme);

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.