Usage
Empty State communicates that there's no content to display yet, and guides users toward a next step. Place a heading, a short description and any actions in the default slot.
import "@nordhealth/components/lib/EmptyState"
Examples
With actions
Pair a heading and description with one or more buttons to offer a clear next step.
Inside a card
An empty state sits naturally inside a card when a section of a view has no content.
No results
Show a No results empty state when a search or filter returns nothing, with a way to clear or adjust the query.
No access
Use an empty state to explain when a user can't see content, and offer a way forward.
RTL
Empty State follows the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Provide a real heading element (such as
<h2>or<h3>) so the empty state has a meaningful place in the document outline; pick the level that fits its surrounding context. - Write a description that explains why there's nothing to show and what the user can do next, rather than leaving the area visually empty without explanation.
- Make any actions genuine, operable controls (such as Button) so they're reachable and usable with the keyboard.
API reference
EmptyState
Empty state can be used when there is no data to display to describe what the user can do next. Empty state provides explanation and guidance to help user progress.
<nord-accordion></nord-accordion>Slots
| Slot name | Description |
|---|---|
Default slot | default slot |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use when another component or part of UI has no items or data to show.
- Help users by clearly explaining the benefit and utility of a product or feature.
- Be encouraging and never make users feel unsuccessful or guilty.
Don’t
- Don’t use as a generic banner to highlight specific content.
Content guidelines
Empty state headings should state to the user what’s wrong or why there’s no content:
When writing empty state headings, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Descriptions in empty states should add useful and relevant additional information:
Button labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:
When writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in button labels, such as “the”, “an” or “a”: