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

Tag overview

The headless tag primitive gives you a compact label contract plus optional removable behavior, but all visual treatment still belongs to the owner.

Imports

Primitive imports

ts
import { TngTag, TngTagClose, TngTagIcon } from '@tailng-ui/primitives';

Basic usage

Compose the tag root, an optional icon slot, and the close action only when the tag is removable.

Headless usage

html
<span
  tngTag
  [tngTagLabel]="status"
  [tngTagRemovable]="true"
  (tngTagRemoved)="removeStatus()"
>
  <span tngTagIcon aria-hidden="true">●</span>
  {{ status }}
  <button type="button" tngTagClose><span aria-hidden="true">×</span></button>
</span>

Style variants

The same headless tag behavior rendered with Plain-CSS and Tailwind skins.

Headless tags (Plain CSS)

Draft Review Stable

Draft, Review, Stable

Accessibility baseline

  • Use a real <button> for tngTagClose whenever possible.
  • Set tngTagLabel so the default remove label stays meaningful.
  • Keep decorative icons aria-hidden unless they communicate state on their own.