Overview
tng-badge displays a count or label on top of projected content (e.g. an icon or button). Supports value (number or string), dot mode, max overflow (e.g. 99+), position, variant, and class hooks.
Quick example
Basic
<tng-badge [value]="count" variant="danger">
<button type="button" class="...">Notifications</button>
</tng-badge>
<tng-badge dot variant="primary">
<button type="button" class="...">Inbox</button>
</tng-badge>
import { TngBadge } from '@tailng-ui/ui/primitives';
count = 12;
Features
value / dot / max
value: number or string. dot: show a dot only. max: cap display (e.g. 99+).
position / overlap
position: top-right, top-left, bottom-right, bottom-left. overlap: badge on top of host vs slightly outside.
rootKlass / hostKlass / badgeKlass
Class hooks for wrapper, host anchor, and badge element.