Empty state
Centered icon + title + copy + optional action for a list/table with no data yet.
Preview
No jobs
Keine JobsErstelle deinen ersten Job, um loszulegen.
<div class="nx-empty"><span class="nx-empty__icon" aria-hidden="true">▤</span><span class="nx-empty__title">Keine Jobs</span><span>Erstelle deinen ersten Job, um loszulegen.</span><button class="nx-btn nx-btn--primary nx-btn--sm" type="button" style="margin-top:8px">Job anlegen</button></div><div className="nx-empty">
<span className="nx-empty__icon" aria-hidden>▤</span>
<span className="nx-empty__title">Keine Jobs</span>
<span>Erstelle deinen ersten Job, um loszulegen.</span>
<NxButton className="nx-btn--sm">Job anlegen</NxButton>
</div>API
Classes
| Class | Description |
|---|---|
.nx-empty | Centered column, padded |
.nx-empty__icon | Decorative, aria-hidden |
.nx-empty__title | Ink, semibold |
Accessibility
- The icon is aria-hidden — the title + copy carry the meaning.
- Always offer the next action (a button) rather than a dead end.
Do / Don’t
- Do: Always pair the empty message with a primary next action.Don’t: Don't ship an empty table/list cell with no guidance at all.