Overview for badge
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.
Badges must always be applied to block-level elements.
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
.
<button mat-raised-button color="primary"
matBadge="8" matBadgePosition="before" matBadgeColor="accent">
Action
</button>
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.
<div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
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.
<div matBadge="1" matBadgeSize="large" class="demo-section">Text with large badge</div>
Badge visibility
The badge visibility can be toggled programmatically by defining matBadgeHidden
.
<button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
Hide
</button>
Theming
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="15" matBadgeColor="warn">home</mat-icon>
Accessibility
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.