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-empty-state> <h2>Something’s wrong</h2> <p>We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</p> <nord-stack justify-content="center" gap="s" direction="horizontal"> <nord-button>View log</nord-button> <nord-button variant="primary">Retry</nord-button> </nord-stack> </nord-empty-state>
This section includes guidelines for designers and developers about the usage of this component in different contexts.
- 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 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”:
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.