API reference
Headless empty is a structural primitive. Every directive only adds a stable data-slot value to your own markup.
Root directive
tngEmpty marks the outer empty-state container. It has no inputs, no outputs, and no built-in behavior.
Root usage
html
<section tngEmpty class="report-empty">
<!-- owner-authored empty state -->
</section>
| Directive | Selector | Data slot | Purpose |
|---|---|---|---|
TngEmpty | [tngEmpty] | empty | Root container for the empty-state layout. |
Part directives
Compose only the regions you need. You can omit icon or actions entirely when the state does not need them.
Part composition
html
<section tngEmpty>
<div tngEmptyIcon>📭</div>
<h3 tngEmptyTitle>No messages</h3>
<p tngEmptyDescription>You are all caught up.</p>
<div tngEmptyActions>
<button type="button">Invite team</button>
</div>
</section>
| Directive | Selector | Data slot | Purpose |
|---|---|---|---|
TngEmptyIcon | [tngEmptyIcon] | empty-icon | Optional icon or illustration region. |
TngEmptyTitle | [tngEmptyTitle] | empty-title | Primary heading for the empty condition. |
TngEmptyDescription | [tngEmptyDescription] | empty-description | Supporting copy that explains what happened and what to do next. |
TngEmptyActions | [tngEmptyActions] | empty-actions | Action row for recovery, creation, or navigation controls. |
Behavior baseline
- The primitive does not add roles, ARIA relationships, or keyboard handling.
- The primitive does not enforce order, though icon, title, description, then actions is the expected pattern.
- Use your surrounding section or heading structure to make the empty state meaningful to assistive technology.
- Reach for the wrapper when you want a built-in shell and
alignhandling.