Badge

The Ignite UI for Angular Badge is an absolutely positioned element that is used to decorate avatars, navigation menus, or other components in the application when visual notification is needed. Badges usually are designed as icons with a predefined style to communicate information, success, warnings, or errors.

Badge Demo

Usage

To get started with the Badge, first you need to install Ignite UI for Angular by typing 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 the app.module.ts file:

// app.module.ts

...
import { IgxBadgeModule } from 'igniteui-angular';

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

Let's create a simple 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 use 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';

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

Having all set up, let's show all the contacts in the IgxListComponent component. The list contains the member name and its availability.

<!-- 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>
      <div>
        <span class="contact-name">{{ member.name }}</span>
        <span>({{ member.status }})</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>
// 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;
        }
    }
}

If the sample is configured properly, a list with members' name and status should be displayed.

Let's add an avatar in front of every chat member. To do this, put another div element in the igx-list-item containing the IgxAvatarComponent. Modify the list item content as shown below.

<!-- 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" roundShape="true" size="small"></igx-avatar>
      </div>
      <div style="margin-left: 20px; align-content: center;">
        <span class="contact-name">{{ member.name }}</span>
        <span>({{ member.status }})</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>

Having just a list with names doesn't provide much useful visual information. The last step is to add igx-badge to show the contact state notification. Modify the list items content as shown below adding a badge component inside the avatar component.

Notice that 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.

In order to position the badge in its parent container, create a custom css class badge-style and define the top and right positions.

<!-- 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" roundShape="true" size="small"></igx-avatar>
        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
      </div>
      <div style="margin-left: 20px; align-content: center;">
        <span class="contact-name">{{ member.name }}</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>
<!-- contacts.component.css -->

.badge-style
{
  position: absolute;
  bottom: -6px;
  right: -50px;
}

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:

@import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the igx-badge-theme and accepts the $icon-color, $text-color, $border-radius, $disable-border and the $shadow parameters.

$color-1: #3d5770;
$color-2: rgb(119, 119, 119);
$color-3: rgb(16, 4, 51);

$elevations-color: igx-elevations($color-1, $color-2, $color-3);

$custom-theme: igx-badge-theme(
    $icon-color: white,
    $text-color: black,
    $border-radius: 20px,
    $disable-border: true,
    $shadow: igx-elevation($elevations-color, 5)
);
Note

As we see the $shadow parameter accepts igx-elevation, which is of type box-shadow. In order to learn more about various options for IgniteUI Shadows, you can take a look at this link.

The last step is to include the component mixins:

@include igx-badge($custom-theme);
Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep:

:host {
 ::ng-deep {
   @include igx-badge($custom-theme);
 }
}

Defining a color palette

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the primary and secondary colors that are passed:

$white-color: white;
$black-color: black;

$custom-palette: igx-palette(
    $primary: $white-color,
    $secondary: $black-color
);

And then with igx-color we can easily retrieve color from the palette.

$custom-theme: igx-badge-theme(
    $icon-color: igx-color($custom-palette, "primary", 500),
    $text-color: igx-color($custom-palette, "secondary", 500),
    $border-radius: 20px,
    $disable-border: true,
    $shadow: igx-elevation($elevations-color, 5)
);
Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.

Using Schemas

Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

Extend one of the two predefined schemas, that are provided for every component, in this case - _light-badge:

// Extending the light badge schema
$custom-badge-schema: extend($_light-badge,
    (   
        icon-color: (igx-color:('primary', 500)),
        text-color: (igx-color:('secondary', 500)),
        border-radius: 20px,
        elevation: 5
    )
);

In order to apply our custom schema we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:

// Extending the global light-schema
$my-custom-schema: extend($light-schema, 
    (
        igx-badge: $custom-badge-schema
    )
);

// Defining our custom theme with the custom schema
$custom-theme: igx-badge-theme(
  $palette: $custom-palette,
  $schema: $my-custom-schema,
  $elevations: $elevations-color
);
Note

When elevation is set to a value different than 0 there are two possible scenarios for applying the shadow:
1) $elevations property of the theme is set => custom shadow is applied with elevation equal to the one set in the schema.
2) $elevations property of the theme is not set => the default shadow is applied with elevation equal to the one set in the schema.

Don't forget to include the themes in the same way as it was demonstrated above.

Demo


API References

Additional Resources

Our community is active and always welcoming to new ideas.