EmptyState
An inline message component to communicate why no data is displayed and what to do next.The <EmptyState /> component is used when there is no data to be displayed, for example:
- When no data exists yet.
- When an error getting the data has occurred.
- When no search results match the user's inputted search value.
For examples of implementation, refer to the Filtering and Tables patterns.
The most basic implementation of an <EmptyState /> only requires a title and a description. The messaging should be concise, informative and communicate why no data can be displayed.
Use the headingLevel prop to control the semantic heading level (rank) according to where in the page structure the empty state lives.
When possible, provide the user with actions they can take to see the data they need. Use the primaryAction prop to render a primary <Button /> (or a <ButtonLink /> if a primaryAction.href is defined). If there are more potential actions the user can take, use the secondaryAction prop to render a secondary button.
NOTE: A secondary action should never be used on its own.
Button link example:
Optionally, provide a spotIllustration from the Illustration package as a complement to convey the message of the empty state.