# Empty State
Empty state components are used to convey that there is no data available to be displayed, or that a search or filter has returned no results.
```html
```
## Best Practices
* Use clear language to indicate there is no data available
* Offer concise guidance about next steps
* Include an [Empty State Action](#d2l-empty-state-action-button) or [Link](#d2l-empty-state-action-link) if it can help the user
* Replace the entire content with its empty state; do not show an empty table or list header
* Don’t use an empty state as a default state while data is loading
* Don't leave a section completely empty, or use a skeleton loading screen in place of an empty state component
* Avoid causing users to believe that they have hit a dead-end when they have not
## Empty State Simple [d2l-empty-state-simple]
The `d2l-empty-state-simple` component is an empty state component that displays a description. An [empty state action component](#d2l-empty-state-action-button) can be placed inside of the default slot to add an optional action.
```html
```
## Empty State Illustrated [d2l-empty-state-illustrated]
The `d2l-empty-state-illustrated` component is an empty state component that displays a title and description with an illustration. An [empty state action component](#d2l-empty-state-action-button) can be placed inside of the default slot to add an optional action.
The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the `illustration` slot. The catalogue of preset empty state illustrations can be found [here](#preset-empty-state-illustrations).
```html
```
## Empty State Action Button [d2l-empty-state-action-button]
Use a `d2l-empty-state-action-button` to add a button that provides users with an easy next step, assuming the next step is to perform an action. If the next step is to navigate to another page, consider using an [Empty State Action Link](#d2l-empty-state-action-link) instead.
To add the button, place a `d2l-empty-state-action-button` component inside of the default slot of `empty-state-simple` or `empty-state-illustrated`. Only a single action can be placed within an empty state component.
The `primary` attribute can be set to render a primary button in place of the default subtle button. Note that the `primary` attribute is only valid when placed within `empty-state-illustrated` components and will have no effect on `empty-state-simple`.
```html
```
## Empty State Action Link [d2l-empty-state-action-link]
Use a `d2l-empty-state-action-link` to add a link that provides users with an easy next step, provided the next step is to navigate to another page. If the next step is actually an action, use an [Empty State Action Button](#d2l-empty-state-action-button) instead.
To add the link, place a `d2l-empty-state-action-link` component inside of the default slot of `empty-state-simple` or `empty-state-illustrated`. Only a single action can be placed within an empty state component.
```html
```
## Preset Empty State Illustrations
| Illustration | Name |
| :---: | :--- |
|  | assembly-line |
|  | blueprint |
|  | calendar |
|  | cat-computer |
|  | checklist |
|  | data-tracking |
|  | desert-road |
|  | fish-hook |
|  | oven |
|  | pipeline |
|  | race |
|  | rockets |
|  | tumbleweed |