Widget empty state

WidgetEmpty is a component for displaying messages in the widgets.

Widgets have “empty” states, which should properly inform user, why there is no data and how to remedy the situation.

Widget’s “empty” state usually includes the following:

• image in svg format;
• title;
• description;
• button (optional);
• select (optional).

If a widget has a title, it should be displayed in the “empty” state, too.

The maximum width of the “empty” state message is 400px. It is required in order the text should be readable.

Be brief. Write briefly. Two or three short sentences are usually enough to describe the situation.

As a rule, the widget height in “empty” state is the same as the height of the widget with data.

The content of the “empty” state is centered horizontally and vertically in relation to the widget content.

There are cases when it is required to reduce the height of the widget with “empty” state for saving the space on the page. In these cases the widget's min-height: 188px. The title becomes the description (use styles from the table above), it is recommended to be reduced up to one sentence.

1. If the whole page should be refreshed, then call the button "Reload page".
2. If the widget should be refreshed, then call the button "Reload".

The list of “empty” states in the widgets:

• No data
• Nothing found
• No more results
• Product is not set up
• Something went wrong (has also specific version: "Cannot filter data")

Use this state, when for some reason there is no data or system cannot show it. If widget has a title, it should be displayed in this state. In this case show the following instead of the data:

• an image corresponding to the type of the data in the widget;
• a message specifying that we have no data or specifying the user’s actions in order to obtain it;
• button helping the users to remedy the situation (optional);
• filters helping to remedy the situation (optional).

Be brief. Do not write too much text in these states. Two or three short sentences are enough.

If your widget has width less than 300px, you may leave just the title with styles of the description text. And hide the description into the Info icon with M size.

It's a specific variant for cases when there is no data in the search results (in the table or on the whole page). In this case show the following instead of the data:

• an universal image;
• a text message specifying that there is no data at the user request;
• button helping to remedy the situation (optional);

If your widget has width less than 300px, you may leave just the title with styles of the description text. And hide the description into the Info icon with M size.

Use this state, when something went wrong at the backend. And either product team does not have any information, what exactly went wrong and where it will be repaired, or product team know about the problem and inform the user about it.

Show the following instead of the data in this case:

• an image;
• text message specifying what user should do;
• an additional button.

We recommend to show the button in this state.

If your widget has width less than 300px, you may leave just the title with styles of the description text. And hide the description into the Info icon with M size.

Show the following instead of the data in this case:

• an image;
• a text message specifying what user should set up;
• an additional button.

We recommend to show the button in this state.

If your widget has width less than 300px, you may leave just the title with styles of the description text. And hide the description into the Info icon with M size.

It's a case when user did something wrong and we need to help him/her dealing with the situation.

Show the following instead of the data in this case:

• an image;
• text message specifying what user should do.

If your widget has width less than 300px, you may leave just the title with styles of the description text. And hide the description into the Info icon with M size.

Use this state, when the data is absent because user needs to connect something. This state is more detailed and more advertising than the others.

• In some cases the product may be set up at once by clicking the corresponding button.
• In other cases user should write to the specified email address for setting up the product.

Title and description must be written in a positive form. For example, write: “Set up the service” instead of “The service is not set up”.

Show the following instead of the data in this state:

• an image corresponding to the type of the data in the widget / advertising picture;
• text message specifying what user should set up or do in order to obtain the data;
• button.

If your widget has width less than 300px, you may leave just the title with styles of the description text. And hide the description into the Info icon with M size.

Interface also can have the state when there is a small amount of data in the widget. This state is usually used in the widgets with table, text and other data.

Add the text: "No more results" – and center it both vertically and horizontally.