Badge

Basic

Display a number, short text or a dot when no value is provided. Zero remains visible.

Severity

Choose a color for the context and use text to communicate its meaning.

Size

Four sizes for different densities. Empty badges use a compact dot.

Overlay

Wrap content in an overlay badge to position a count or dot at its top corner.

Button and live updates

Change the count or hide the badge. The notification button marks all messages as read.

Usage and API

import { AvBadge, AvOverlayBadge } from 'avero-ui';

<av-badge [value]="2" severity="success" />
<av-badge value="99+" badgeSize="large" />
<av-badge severity="danger" role="img" aria-label="New activity" />

<av-overlay-badge [value]="count" severity="danger">
  <button type="button" [attr.aria-label]="'Inbox, ' + count + ' unread messages'">
    <span aria-hidden="true">✉</span>
  </button>
</av-overlay-badge>

<button type="button">Notifications <av-badge [value]="count" /></button>

Import AvBadge for inline badges or AvOverlayBadge to wrap another element. Both accept value (string or number), severity (primary, secondary, success, info, warn, danger, contrast), badgeSize (small, normal, large, xlarge) and badgeDisabled. Defaults are primary and normal.

Null, undefined or an empty string displays a dot. Numeric zero displays 0. Values are rendered as text; supply an abbreviated string such as 99+ when needed. badgeDisabled hides only the badge, preserving overlay content.

Badges are non-interactive and do not announce changes automatically. Provide meaningful surrounding text, use role="img" with aria-label for a standalone dot, or add a live status region for dynamic counts. OverlayBadge also accepts badgeLabel to describe its badge separately from the wrapped content.

Customize --av-badge-background, --av-badge-color, --av-badge-radius and --av-overlay-badge-border. Reference: PrimeNG Badge.