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
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
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
cmd
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 {}
typescript
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 {}
typescript
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 {}
typescript
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>
html
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;
}
scss
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>
html
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;
}
scss
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');
}
}
ts
Then, just specify the icon name and family as follows:
<igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>
html
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 {}
typescript
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>
html
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'),
];
typescript
...
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;
}
}
}
typescript
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;
}
css
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';
scss
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,
);
scss
To include the new theme we use the css-vars
mixin:
@include css-vars($custom-badge-theme);
scss
Demo
API References
- IgxAvatarComponent
- IgxBadgeComponent
- IgxBadgeComponent Styles
- IgxListComponent
- IgxListItemComponent
- IgxBadgeType
Theming Dependencies
Additional Resources
Our community is active and always welcoming to new ideas.