Components

Badge

Angular Material Badge is a small counter or status marker that sits on the corner of whatever it is attached to, usually a piece of text, an icon or a button. It comes in three sizes, from a bare dot to a label with a number in it, and it can be greyed out or hidden without leaving the markup. BuilderKit restyles the badge so its shape, color and typography match the rest of the design system.

Official docs API reference

A badge is most often pinned to an icon button, where it counts the items waiting behind the action.

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"/>

Badge positions

A badge can sit on any of the four corners of its host, and it either overlaps the element it belongs to or hangs just outside of it.

Corners

Without overlap

<button matIconButton matBadge="3" matBadgePosition="above after">
  <mat-icon svgIcon="bell"/>
</button>

<button matIconButton matBadge="3" matBadgePosition="below before">
  <mat-icon svgIcon="bell"/>
</button>

<button matIconButton matBadge="3" [matBadgeOverlap]="false">
  <mat-icon svgIcon="bell"/>
</button>