Skip to main content

angular material - How to show Badge in a button

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to show Badge in a button
</h2>


<button mat-raised-button
  matBadge="8" matBadgePosition="after">
    Badge In A Button
</button>

<br/><br/>
<button mat-raised-button
  matBadge="8" matBadgePosition="before">
    Badge Position Before
</button>

<br/><br/>
<button mat-raised-button
 matBadgeSize="large" matBadge="8">
    Large Size Badge
</button>

<br/><br/>
<button mat-raised-button
 matBadgeColor="warn" matBadge="8">
    Badge Color Warn
</button>

<br/><br/>
<button mat-raised-button
 matBadgeOverlap="false" matBadge="8">
    Badge Not Overlapped
</button>
app.module.ts [import] 

import { MatBadgeModule } from '@angular/material/badge'
import { MatButtonModule } from '@angular/material/button'
More Angular tutorials
Labels: