components
Empty State
v.1.0.0 | Saturn
StorybookDisplay to inform the users when there is no data provided.
Components
Play with the component with our playground.
Anatomy
| Name | Description |
|---|---|
1 Required | Illustration has to be 64px. |
2 Required | Empty or Error Summary. A short message describing the reason for the state and what to do next. See content guidelines below for details. |
3 | A title that provides a concise description of the current state. |
4 | Primary button may be use for primary actions. In mobile buttons will go to full width keeping the margins. |
5 | When it is required to make a main, secondary or tertiary actions. |
| Name | Description |
|---|---|
1 Required | Illustration has to be 64px. |
2 Required | A title that provides a concise description of the current state. |
3 Required | Empty or Error Summary. A short message describing the reason for the state and what to do next. See content guidelines below for details. |
Variants
For screens
For sections
Options
- Image + Title + Text + Button + Second button
- Image + Title + Text + Button
- Image + Title + Text
- Image + Title
Do's and dont's
Do’s
Use a relevant spot illustration or icon.
Caution
Don't use long sentences in vertical mode.
Don’t
Don’t use an empty state without an illustration.
Don’t
An empty state cannot be used without the explanatory paragraph