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

Styling contract

Headless Badge generates the bubble node for you, but styling still belongs to your host class and the stable hooks on the generated .tng-badge element.

Generated node hooks

HookWhere it appearsUse it for
.tng-badgeGenerated badge nodeBase badge visuals.
data-slot="badge"Generated badge nodeStable attribute selector for the bubble.
data-position, data-placementGenerated badge nodePlacement-specific transforms.
data-size, data-tone, data-variantGenerated badge nodeTheme and size contracts.
data-dot, data-disabledGenerated badge nodeDot mode and disabled-state styling.
.tng-badge-host, data-tng-badge-hostHost elementParent-level layout and placement overrides.

CSS starter

Build your shell on the host, then style the generated bubble beneath it.

badge-host.css

css
.notification-host {
  align-items: center;
  appearance: none;
  background: var(--tng-semantic-background-surface);
  border: 1px solid var(--tng-semantic-border-strong);
  border-radius: 0.65rem;
  display: inline-flex;
  min-height: 2.5rem;
  padding-inline: 1rem;
}

.notification-host .tng-badge {
  background: var(--tng-badge-bg, #dc2626);
  color: var(--tng-badge-fg, #ffffff);
}

Host guidance

The directive will add position: relative to the host when no inline position is present, so badge placement has a stable anchor. Prefer your own host class for anything more specific.

badge-placement.css

css
.notification-host {
  position: relative;
}

.notification-host[data-tng-badge-host] .tng-badge[data-position="bottom-start"] {
  transform: translate(-50%, 50%);
}