Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Headless Badge overview

tngBadge is a host directive that renders a generated badge bubble inside the host element. You own the host markup and surrounding layout, while the primitive manages the bubble node, placement, and runtime sizing sync.

Imports

Import the primitive directly when you want full control over the host element and its visual shell.

Headless import

ts
import { TngBadge } from '@tailng-ui/primitives';

Basic usage

Bind numeric counts, strings, or dot mode directly on the host. The primitive inserts the badge bubble as an internal node and keeps it anchored to the host.

Minimal badge host

html
<button
  type="button"
  [tngBadge]="notifications()"
  [tngBadgeMax]="99"
>
  Inbox
</button>

Style variants

The same badge behavior rendered with owner-authored Plain CSS and Tailwind hosts.

Headless badge row (Plain CSS)

count: 12 | dot: on

Accessibility baseline

  • The generated badge node is decorative by default and is marked with aria-hidden="true".
  • Put the meaningful label on the host itself, for example aria-label="Inbox notifications".
  • Use dot mode for status cues when you do not want the bubble to announce a numeric count.