Empty State

Updated on 06 November 2016

Docs are work in progress, check open issues and see how you can help!

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)
  • Title
  • Body (Optional)

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

TODO: Include Flat button to Optional elements in Empty State

Pseudo code:

<empty_state>
  <empty_state-content>
    <icon size="xx-large"/>
    <title/>
    <body/>
  </empty_state-content>
</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.

Specifications

//Base

$empty_state-content-horizontal-padding        : unit(8);
$empty_state-title-padding-top                 : unit(8);
$empty_state-body-padding-top                  : unit(2);

// Text

$empty_state-title-text-type        : 'title';
$empty_state-body-text-type         : 'body';
$empty_state-text-theme             : 'muted';

API

name type default
title String ””
body String null
src Image null