Last updated on
Version: 1.0.0
Overview
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.
<div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
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 matBadge="8" matBadgePosition="before">
Action
</button>