Imports

Bring in the root plus any parts you want to render. Omit parts you do not need.

import {
  TngEmpty,
  TngEmptyActions,
  TngEmptyDescription,
  TngEmptyIcon,
  TngEmptyTitle,
} from '@tailng-ui/primitives';

Basic composition

The root and parts are purely structural. Your own markup, CSS, and surrounding semantics define how the empty state is announced and displayed.

<section tngEmpty class="report-empty" [attr.data-align]="'start'">
  <div tngEmptyIcon>📭</div>
  <h3 tngEmptyTitle>No reports yet</h3>
  <p tngEmptyDescription>Create your first report to start tracking delivery health.</p>
  <div tngEmptyActions>
    <button type="button">Create report</button>
  </div>
</section>

Structural baseline

• There is no interaction logic or keyboard behavior in the primitive.
• Every directive only reflects a stable data-slot value.
• Use your surrounding section, landmark, or heading structure to give the empty state meaning.
• When you want a default shell with align handling, use the component wrapper.