in Angular by
Angular blinking badges

1 Answer

0 votes
Bootstrap Badges and Labels


Badges are numerical indicators of how many items are associated with a link:

News 5

Comments 10

Updates 2

The numbers (5, 10, and 2) are the badges.

Use the .badge class within <span> elements to create badges:


<a href="#">News <span class="badge">5</span></a><br>

<a href="#">Comments <span class="badge">10</span></a><br>

<a href="#">Updates <span class="badge">2</span></a>

Badges can also be used inside other elements, such as buttons:

The following example shows how to add badges to buttons:


<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

Badge overview

Text with a badge4

Button with a badge on the left

Icon with a badge home15Example with a home icon with overlaid badge showing the number 15

 Badge position

By default, the badge will be placed above after. The direction can be changed by defining the attribute matBadgePosition follow by above|below and before|after.

<mat-icon matBadge="22" matBadgePosition="above after">home</mat-icon>

The overlap of the badge in relation to its inner contents can also be defined using the matBadgeOverlap tag. Typically, you want the badge to overlap an icon and not a text phrase. By default it will overlap.

<h1 matBadge="11" matBadgeOverlap="false">



 Badge sizing

The badge has 3 sizes: small, medium and large. By default, the badge is set to medium. You can change the size by adding matBadgeSize to the host element.

<h1 matBadge="11" matBadgeSize="large">



 Badge visibility

The badge visibility can be toggled programmatically by defining matBadgeHidden.

<h1 matBadge="11" [matBadgeHidden]="!visible">




Badges can be colored in terms of the current theme using the matBadgeColor property to set the background color to primary, accent, or warn.

<mat-icon matBadge="22" matBadgeColor="accent">




Badges should be given a meaningful description via matBadgeDescription. This description will be applied, via aria-describedby to the element decorated by matBadge.

When applying a badge to a <mat-icon>, it is important to know that the icon is marked as aria-hidden by default. If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way. See the guidance on indicator icons for more information.

Related questions

0 votes
asked Aug 11 in Angular by DavidAnderson
0 votes
asked Aug 11 in Angular by DavidAnderson
0 votes
asked Jul 5, 2022 in Angular by sharadyadav1986