Badge

Small numerical value or status dot displayed over another element.

Basic
U5U25U0
<prism-badge [count]="5">
  <prism-avatar label="U" size="lg" />
</prism-badge>
<prism-badge [count]="25" status="success">
  <prism-avatar label="U" size="lg" />
</prism-badge>
Standalone
99NewHot
<prism-badge [count]="99" [isStandalone]="true" />
<prism-badge count="New" [isStandalone]="true" status="success" />
<prism-badge count="Hot" [isStandalone]="true" status="warning" />
Dot Mode
<prism-badge [dot]="true" status="error">
  <prism-icon name="notification-line" style="font-size:1.5rem" />
</prism-badge>
<prism-badge [dot]="true" status="success">
  <prism-icon name="mail-line" style="font-size:1.5rem" />
</prism-badge>
<prism-badge [dot]="true" status="processing">
  <prism-icon name="message-line" style="font-size:1.5rem" />
</prism-badge>
Dynamic Count
U55
dynamicCount = signal(5);

<prism-badge [count]="dynamicCount()">
  <prism-avatar label="U" size="lg" />
</prism-badge>
<prism-button (click)="dynamicCount.update(c => c - 1)">-</prism-button>
<prism-button (click)="dynamicCount.update(c => c + 1)">+</prism-button>
Overflow Count
U99+U999+
<prism-badge [count]="100" [overflowCount]="99">
  <prism-avatar label="U" size="lg" />
</prism-badge>
<prism-badge [count]="1000" [overflowCount]="999">
  <prism-avatar label="U" size="lg" />
</prism-badge>
NameTypeDefaultDescription
countnumber | string0Number or text to display in the badge.
dotbooleanfalseWhether to show a small dot instead of a count.
showZerobooleanfalseWhether to display the badge when count is zero.
overflowCountnumber99Max count; displays as "99+" when exceeded.
status'success' | 'error' | 'warning' | 'default' | 'processing''error'Color status of the badge.
offset[number, number][0, 0]Fine-tune badge position [x, y] in px.
isStandalonebooleanfalseRenders badge inline without absolute positioning.

Name	Type	Default	Description
`count`	`number \| string`	`0`	Number or text to display in the badge.
`dot`	`boolean`	`false`	Whether to show a small dot instead of a count.
`showZero`	`boolean`	`false`	Whether to display the badge when count is zero.
`overflowCount`	`number`	`99`	Max count; displays as "99+" when exceeded.
`status`	`'success' \| 'error' \| 'warning' \| 'default' \| 'processing'`	`'error'`	Color status of the badge.
`offset`	`[number, number]`	`[0, 0]`	Fine-tune badge position [x, y] in px.
`isStandalone`	`boolean`	`false`	Renders badge inline without absolute positioning.