Empty State

Empty States occur whenever content can not be displayed, due to different circumstances, for example if an application is opened for the first time. Empty States can be used as placeholders, or in addition to the shown content. For more information visit Brandguide.
See a working example in the table demo.


How to use the Empty State Component

If you would like to have space around the content of the empty state you need to add a height to the parent element of the empty state.

If you would like to us the empty state consider that the empty state component shows all your elements via content projection. It styles your elements according to the Styleguide. If you take a look at all examples in the tabs to the right, all elements are aligned in center (horizontally). The vertical alignment depends on the parent element of the empty state. If you check the example in the tab next to this one you will notice that there is no space to the top and bottom. The empty state inherits the height from the parent element. In the first example the parent height is the minimum height which is necessary to show your content. In the second example and all others the parent element is an div which has a height of 500px.

No items to display.
To add new elements, click the add button.
No items to display.
To add new elements, click the add button.
No items to display.
To import, drop files here or click the import button.
No items to display.
To add new elements, click the add button.
No items to display.
To import, drop files here or click the import button.
No items to display.
To add new elements, click the add button.