Empty State

Empty State component is used when content can’t be shown — A list that doesn’t contain any items, or a search that doesn’t display any results. Empty State can consist of the following components:

  • Icon (Optional — xx-large size)
  • Content (Body + Title inside wide Container)
  • Action (Optional Button)

This component also doesn’t have it’s own background.

Pseudo code:

<empty_state>
  <spacer size="xxx-large"/>
  <icon size="xx-large"/>
  <container>
    <title/>
    <spacer size="xx-large"/>
    <body/>
  </container>
  <action/>
  <spacer size="xxx-large"/>
</empty_state>
Oh… You haven’t listed anything!
No worries! list an item in three easy steps and start being a pro seller.
Oh… You haven’t listed anything!
No worries! list an item in three easy steps and start being a pro seller.
Oh… You haven’t listed anything!
No worries! list an item in three easy steps and start being a pro seller.
Action