Go to Content
Design System
Playroom Storybook
#ClimateEmergency

StatusInfo

Open in Storybook Open in Figma

StatusInfo communicates information to the user with additional visual weight.

It is often used as an “Empty State” placeholder – to avoid having large empty areas, but also to describe what might show up in this area once certain criteria are met, e.g. the user has added the first item to a previously empty list.

StatusInfo is also used to create Success & Error cards.

Usage

For good looks, even in its purest form, the StatusInfo always comes with a nice big icon/animation and a headline.

Nested inside a card

Per default, the StatusInfo has to be shown inside a card.

Loading demo…
Do
  • Try to add a call to action to an StatusInfo or display information on how to remove the Empty State.
Rules For Designers
  • Usage of an icon/animation and headline is mandatory
  • Usage of body text and call to action (primary and secondary) is optional
  • If a StatusInfo is the first element of a page, it should replace the H1 to avoid redundancy
  • Important components such as credit card box, function card, alert, etc. are to be positioned above the empty state
  • Primary actions (e.g. a FunctionCard) are to be positioned above an empty state
  • Secondary actions (e.g. “Create from preset”) are to be positioned below an empty state
Rules For Copywriters
  • If the headline breaks on desktop, shorten the headline. Otherwise there are too many lines on mobile phones.
Rules For Accessibility
  • H1 should be hidden

On regular background

As an exception, the StatusInfo can be placed on a default background.

Loading demo…

Rich content

Rich content and a multitude of buttons can be used as well.

Loading demo…

Icons

A grey icon ($color-gray-300 (#a3b5c9)) must be used when the product is empty or there is no content to display.

Rules For Designers
  • Icons have to be descriptive
  • Use the file icon for an StatusInfo with documents
  • Use the list icon for an StatusInfo with lists
  • Use the comment icon for an StatusInfo with messages
  • Use the search icon for an StatusInfo with filter or search results
  • You may use custom icons if applicable - in all other cases of StatusInfos use the empty-state-generic icon
With documents
file
With lists
list
With messages
comment
With filter or search results
search
Default
emptystate