Angular badge component is small count and labeling component.
Available in Other JavaScript Frameworks
CoreUI Angular Badge Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:
On this page
Example
Badge component scales to suit the size of the parent element by using relative font sizing and em units.
import { Component } from '@angular/core';
import { BadgeComponent } from '@coreui/angular';
@Component({
selector: 'docs-badge-example',
templateUrl: './badge-example.component.html',
imports: [BadgeComponent]
})
export class BadgeExampleComponent {}<h1>Example heading <c-badge color="secondary">New</c-badge></h1>
<h2>Example heading <c-badge color="secondary">New</c-badge></h2>
<h3>Example heading <c-badge color="secondary">New</c-badge></h3>
<h4>Example heading <c-badge color="secondary">New</c-badge></h4>
<h5>Example heading <c-badge color="secondary">New</c-badge></h5>
<h6>Example heading <c-badge color="secondary">New</c-badge></h6>import { Component } from '@angular/core';
import { BadgeComponent, ButtonDirective } from '@coreui/angular';
@Component({
selector: 'docs-badge-example-2',
templateUrl: './badge-example-2.component.html',
imports: [ButtonDirective, BadgeComponent]
})
export class BadgeExample2Component {}<button cButton color="primary">
Profile <c-badge color="secondary">9</c-badge>
<span class="visually-hidden">unread messages</span>
</button>Contextual variations
Add any of the below-mentioned color props to modify the presentation of a badge.
import { Component } from '@angular/core';
import { BadgeComponent } from '@coreui/angular';
@Component({
selector: 'docs-badge-contextual-variations',
templateUrl: './badge-contextual-variations.component.html',
imports: [BadgeComponent]
})
export class BadgeContextualVariationsComponent {}<c-badge color="primary">primary</c-badge>
<c-badge color="success">success</c-badge>
<c-badge color="danger">danger</c-badge>
<c-badge color="warning">warning</c-badge>
<c-badge color="info">info</c-badge>
<c-badge color="light">light</c-badge>
<c-badge color="dark">dark</c-badge>Pill badges
Apply the shape="rounded-pill" prop to make badges rounded.
import { Component } from '@angular/core';
import { BadgeComponent } from '@coreui/angular';
@Component({
selector: 'docs-badge-pill-badges',
templateUrl: './badge-pill-badges.component.html',
imports: [BadgeComponent]
})
export class BadgePillBadgesComponent {}<c-badge color="primary" shape="rounded-pill">primary</c-badge>
<c-badge color="success" shape="rounded-pill">success</c-badge>
<c-badge color="danger" shape="rounded-pill">danger</c-badge>
<c-badge color="warning" shape="rounded-pill">warning</c-badge>
<c-badge color="info" shape="rounded-pill">info</c-badge>
<c-badge color="light" shape="rounded-pill">light</c-badge>
<c-badge color="dark" shape="rounded-pill">dark</c-badge>Positioned badges
Use position prop to place a c-badge component it in the corner of a link or button.
import { Component } from '@angular/core';
import { BadgeComponent, ButtonDirective } from '@coreui/angular';
@Component({
selector: 'docs-badge-positioned-badges',
templateUrl: './badge-positioned-badges.component.html',
imports: [ButtonDirective, BadgeComponent]
})
export class BadgePositionedBadgesComponent {}<button cButton color="primary" class="position-relative m-1">
Profile
<c-badge color="danger" position="top-start" shape="rounded-pill">99+</c-badge>
<span class="visually-hidden">unread messages</span>
</button>
<button cButton color="primary" class="position-relative m-1">
Profile
<c-badge color="danger" position="top-end" shape="rounded-pill">99+</c-badge>
<span class="visually-hidden">unread messages</span>
</button>
<br>
<button cButton color="primary" class="position-relative m-1">
Profile
<c-badge color="danger" position="bottom-start" shape="rounded-pill">99+</c-badge>
<span class="visually-hidden">unread messages</span>
</button>
<button cButton color="primary" class="position-relative m-1">
Profile
<c-badge color="danger" position="bottom-end" shape="rounded-pill">99+</c-badge>
<span class="visually-hidden">unread messages</span>
</button>API
Badge Module
import { NgModule } from '@angular/core';
import { BadgeModule } from '@coreui/angular';
@NgModule({
imports: [BadgeModule]
})
export class CustomAppModule {}Badge Standalone
import { Component } from '@angular/core';
import { BadgeComponent } from '@coreui/angular';
@Component({
template: `<c-badge>42</c-badge>`,
imports: [BadgeComponent],
standalone: true
})
export class CustomAppComponent {}c-badge
component
import { BadgeComponent } from '@coreui/angular'