Empty State

Present an empty state when there is an opportunity to provide explanation of an interface in absence of data. Empty states should orient the user, or communicate benefits of a feature. Use the following component to standardize empty state messaging display. Nevertheless, consider alternative experiences in situations where data is not available. For general error messages, use the error component instead.


Install the component dependency:

Include a React component in your project:

EmptyState PropTypes

Name
Value
Description
Default
actions
EmptyState.Action
caption
EmptyState.Caption
heading
Required
EmptyState.Heading
illustration
EmptyState.Illustration
size
small | large
disable resizing layout and set explicit size (from EmptyState.sizes)

EmptyState.Heading PropTypes

as
heading tagName
h1

EmptyState.Illustration PropTypes

name
Required
bookmark | channel | cloud | code | data | document | magnify | signal | video | zen
the illustration name (from Illustration.names)

Default full page empty state


Layout scales from ‘large’ to ‘small’ based on container width. OR may be set as small

Consider alternatives to empty states. Instead of an empty experience, might there be starter, educational, or sample content to present to users to help them learn about the product and start using it right away?

👉 Sample content

If the screen is intended to be populated with content by a user, consider suggesting samples or recommendations to ease the effort of getting started.

👉 Educational content

A single graphic and message may not be enough to convey the purpose of a feature. Consider animated or video walkthroughs, but keep them brief and dismissible.

👉 Best match suggestion

If the absence of data occurs due to a user query such as a search, consider displaying a best match instead of nothing at all.

Follow voice and tone guidelines when writing copy for empty states. Appropriate empty statement consist of a short declarative statement of what occurred, followed by a brief sentence giving more context if necessary. Provide a clear CTA button that’s no more than 2-3 words. Write clearly and conversationally like you would if you were talking to someone. Try to use an active voice


bookmark

channel

cloud

code

data

document

magnify

signal

video

zen

If no illustration in the standard set is found to be suitable, you may officially aire your grievance, or... consider creating a custom illustration within the guidelines of the predefined style.