All our applications follow a standard design to maintain consistency and be a user friendly experience, one of these standards is the Empty State of the app.

We say that an app is in the Empty State at the moment the user has not interacted with it and there is nothing to display from the application.

In this article we will explain with an example how to add an Empty State to an app.

Empty State components

An Empty State is composed of three elements:

• A wrapper
• The app logo
• A Button

See the example below:

Unbounce’s Instagram app

As a standard, we use the same logo that we have in the iconUrl property of our app manifest.

When the user clicks the button, the app should open its control panel.

Creating the components

For the wrapper, add the following code:

import styled from 'styled-components';

export const EmptyState = styled.div`
  background: #ededed;
  display: grid;
  justify-content: center;
  grid-gap: 20px;
  padding: 30px;
  text-align: center;
  width: 100%;
`;

The component we use for the logo has the following styles:

export const StyledImg = styled.img`
  max-height: 100px;
  max-width: 50%;
  margin: auto;
`;

And finally, we have a second wrapper for the button: