Emptyable

An Emptyable is an item can contains optional / varying children, and should show an empty state if there are no children. It is recommended that tables and lists which can vary in length and have zero children at times have a specified empty state for user experience reasons.

React
HTML

<Row>
  <Col>
    <h3>With No Children</h3>
    <Emptyable emptyState={<p className="EmptyState">There is no content here.</p>}/>
  </Col>
  <Col>
    <h3>With Children</h3>
    <Emptyable emptyState={<p className="EmptyState">There are no items here.</p>}>
      <p>Content <strong>is</strong> present.</p>
    </Emptyable>
  </Col>
</Row>

<Row>
  <Col>
    <h3>With No Children</h3>
    <Emptyable emptyState={<p className="EmptyState">There is no content here.</p>}/>
  </Col>
  <Col>
    <h3>With Children</h3>
    <Emptyable emptyState={<p className="EmptyState">There are no items here.</p>}>
      <p>Content <strong>is</strong> present.</p>
    </Emptyable>
  </Col>
</Row>