Components

Badge

Angular Material Badge is a small component that displays a number or label, often used to indicate item counts or notifications.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Badge and gives it a more modern appearance.

Text with a badge

Text with small badge

Text with medium badge

Text with large badge

Button with a badge on the left

Button toggles badge visibility

Icon with a badge

Text with a disabled badge

<div matBadge="4">Text with a badge</div>

<button matButton matBadge="8" matBadgePosition="before">Action</button>

<mat-icon svgIcon="house" matBadge="15"/>