Your bookmarks

EmptyState

Indicates when there’s no data to show, like when a search has no results.

Sometimes users will perform an action and expect to see something, but you have nothing to show them. This happens when a search has no results, when they haven’t entered data yet, and other similar cases. Help them get out of this situation by providing guidance in an empty state.

Remember that an empty state is not a desired outcome, so try to encourage users to continue with helpful language and a positive illustration. Guide them to the next step to take to get to their desired goal.

Component status

Figma
Released
Web (React)
Planned
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Title: sets the context and works best when short; illustration: adds visual context; description: optionally adds more context and works best when short; action: optionally adds an action to get out of the empty state.