API reference
Headless Badge is a directive-only primitive. It attaches to your chosen host and generates a badge bubble element inside that host at runtime.
Directive selector
The primitive uses the attribute selector [tngBadge], so you can apply it to buttons, links, icons, tabs, or any other positioned host.
Badge host
html
<button type="button" [tngBadge]="5">Inbox</button>Inputs and generated node
| Input | Type | Default | Notes |
|---|---|---|---|
tngBadge | number | string | null | undefined | null | Primary count or text content. |
tngBadgeDot | boolean | false | Dot mode suppresses text content. |
tngBadgeMax | number | 99 | Numeric values above max render as 99+. |
tngBadgeHidden | boolean | false | Removes the generated badge node while true. |
tngBadgePosition | 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start' | 'top-end' | Placement corner used for badge anchoring. |
tngBadgeSize, tngBadgeTone, tngBadgeVariant | string unions | 'md', 'danger', 'solid' | Reflected as stable data attributes on the generated badge node. |
tngBadgeOffsetX, tngBadgeOffsetY | number | string | null | undefined | null | Extra offset merged into the runtime transform. |
tngBadgeClass, tngBadgeStyle | string, Record<string, string | number> | null | Applied directly to the generated bubble element. |
The generated node is a span.tng-badge with aria-hidden="true", so the host should carry the meaningful accessible label.
Runtime positioning
The primitive tracks host and badge size with ResizeObserver when available, falling back to window resize. It also writes runtime metrics as CSS custom properties on the generated badge element.
Runtime CSS vars
css
.tng-badge {
--tng-badge-anchor-width: 0px;
--tng-badge-anchor-height: 0px;
--tng-badge-self-width: 0px;
--tng-badge-self-height: 0px;
}