import { Meta } from '@storybook/addon-docs/blocks'

<Meta title="Guide|Empty" />

# Empty States

An empty state is our way of communicating to the user that there is no content to load and what action they should take next. They are vital in making the experience feel more approachable and understandable.

---

### Usage

Empty states can be employed to:

- Make users aware that a feature is not configured for use.
- Act as a placeholder for regions in the app left blank intentionally.

### Layout

| Item | Usage | Required |
|---|---|---|
| `Description` | Used to give context to the user and describe what they can do | Yes |
| `Actions section` | Used to give the user a way to act on the empty state | Yes |

**Call to action**

The action prompts the user to fill the empty state:

- The call to action button in the empty state should be a primary button.
- There is only one primary button since there can only be one primary button per form. If there is a need for more than one button, the other should be a secondary button.

### Dont's

Keep the description clear, concise and informative.

### Dont's

Do not add more that two actions on the empty state.