# Empty state

[component-header:sl-empty]

Empty states are moments where there is no data to display. They are mostly seen the first time a user interacts with a feature, but can be used when data has been deleted or is unavailable.

## Example looks

**Default look:** The minimum version of the empty state.

```html preview
<sl-empty></sl-empty>
```

### Custom text

With just enough contextual guidance, empty states ensure a smoothness of experience. Explain clearly the next action to populate the space. Or explain why the space is empty. Tell the benefit of taking next steps.

```html preview
<sl-empty>Get started by creating a new project.</sl-empty>
```

A short and concise explanation as the headline. Where possible, this should be a positive statement.

That first example below, is using an empty icon slot to hide the default icon.

```html preview
<sl-empty header="You don't have access to this module" class="mb-5">
  <span slot="icon"></span>
  Please contact your administrator</sl-empty
>

<sl-empty header="No results found">
  <sl-icon slot="icon" name="search"></sl-icon>
  Try adjusting your search or filters to find what you're looking for</sl-empty
>
```

### Actions

**Primary actions:** Direct the user to a primary action button that help populate the view.

```html preview
<sl-empty header="Orders">
  Create orders to start sell something
  <sl-button type="primary" slot="actions">Create order</sl-button>
</sl-empty>
```

### Custom illustrations

An image or icon that relates to the situation (optional).

```html preview
<sl-empty header="Contacts">
  <img slot="icon" src="/assets/images/shoe.svg" style="width: 400px;" />
  This is your customers and suppliers
  <sl-button type="default" slot="actions">View settings</sl-button>
  <sl-button type="primary" slot="actions">Create partner</sl-button>
  <sl-button type="primary" mode="text" slot="secondary-actions">Learn more</sl-button>
</sl-empty>
```

## Example use

### No data empty states

Dropdowns

```html preview
<sl-dropdown>
  <sl-button slot="trigger" caret>Dropdown</sl-button>
  <sl-menu>
    <sl-empty></sl-empty>
  </sl-menu>
</sl-dropdown>
```

Tables

```html preview
<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="3"><sl-empty></sl-empty></td>
  </tr>
</table>
```

Cards

```html preview
<sl-card header="Calculation">
  <sl-empty></sl-empty>
</sl-card>
```

### Error management

```html preview
<sl-empty header="Something went wrong">
  <sl-icon slot="icon" name="exclamation-circle"></sl-icon>
  Please try again in a few minutes
</sl-empty>
```

[component-metadata:sl-empty]