---
metaTitle: Empty Container component | AwesCode UI
meta:
  - name: description
    content: The <AwEmptyContainer /> component displays empty states with icon/image, title, description, and optional CTA button - UI Vue component for AwesCode UI.
title: Empty Container
---

# AwEmptyContainer

**Category:** Molecule | **Import:** Global

The `AwEmptyContainer` component displays empty states in your application with an animated entrance effect. It's designed for scenarios like empty lists, no search results, or initial states before data is loaded.

## Overview

`AwEmptyContainer` provides a consistent way to display empty states with:
- Icon or custom image
- Title and description text
- Optional call-to-action button
- Multiple theme options (card, empty, transparent)
- Animated entrance effect
- Fully customizable via slots

## Usage

### Basic Example

```markup
<AwEmptyContainer
    icon="awesio/empty-box"
    title="Nothing here yet"
    message="Start by adding your first item."
/>
```

### With Image

Use a custom image instead of an icon:

```markup
<AwEmptyContainer
    image="/img/placeholders/empty.svg"
    title="No projects found"
    message="Create your first project to get started."
/>
```

### With CTA Button

Add a call-to-action button using the `ctaButton` prop:

```markup
<AwEmptyContainer
    icon="awesio/box"
    title="No files uploaded"
    message="Upload your first file to begin organizing your content."
    :cta-button="{ text: 'Upload File', icon: 'awesio/upload' }"
/>
```

### Different Themes

**Card Theme (default):**
```markup
<AwEmptyContainer
    theme="card"
    icon="awesio/mail"
    title="Inbox is empty"
    message="You have no new messages."
/>
```

**Empty Theme:**
```markup
<AwEmptyContainer
    theme="empty"
    icon="awesio/search"
    title="No results found"
    message="Try adjusting your filters."
/>
```

**Transparent Theme:**
```markup
<AwEmptyContainer
    theme="transparent"
    icon="awesio/star"
    title="No favorites yet"
    message="Add items to your favorites to see them here."
/>
```

### Custom Slots

Use slots for complete customization:

```markup
<AwEmptyContainer
    title="Custom Empty State"
    message="Slots provide full control over appearance."
>
    <template #image>
        <div class="flex gap-2">
            <AwIcon name="awesio/star" size="60" color="warning" />
            <AwIcon name="awesio/heart" size="60" color="error" />
        </div>
    </template>

    <template #button>
        <AwFlow :gap="2">
            <AwButton color="accent">Primary Action</AwButton>
            <AwButton theme="outline">Secondary Action</AwButton>
        </AwFlow>
    </template>
</AwEmptyContainer>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| image | Image URL for custom image | `String` | `false` | `''` |
| icon | Icon name - see [Built-in Icons](/reference/icons) | `String` | `false` | `''` |
| title | Empty state title | `String` | `false` | `''` |
| message | Primary description text (sanitized HTML) | `String` | `false` | `''` |
| description | Alternative description text (sanitized HTML, deprecated in favor of `message`) | `String` | `false` | `''` |
| theme | Layout theme: `card`, `empty`, `transparent` | `String` | `false` | `'card'` |
| ctaButton | Props object passed to AwButton component | `Object` | `false` | `null` |

**Note:** Both `message` and `description` props are supported, but `message` takes precedence if both are provided.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| image | Custom image or icon area | - | `<img>` if `image` prop provided, or `<AwIcon>` if `icon` prop provided |
| button | Custom button/action area | - | `<AwButton>` with props from `ctaButton` |

### Events

No events are emitted by this component.

## Component Behavior

### Theme Variants

The `theme` prop controls the container styling:

- **`card` (default)**: Wraps content in `AwCard` component with padding (2.5rem vertical)
- **`empty`**: Plain container without card styling, minimal padding (1.5rem vertical)
- **`transparent`**: Plain container without any padding or background

### Animation

The component includes an entrance animation that triggers on mount:
- A 300ms delay before the `aw-empty-container--visible` class is applied
- This enables CSS transitions for a smooth fade-in effect

### Image Priority

The component displays images/icons in this priority order:
1. Custom content via `#image` slot
2. Image from `image` prop (displays as `<img>` tag with max-width: 100%, width: 16rem)
3. Icon from `icon` prop (displays as `AwIcon` with size 80)
4. Nothing (if none provided)

### Message Sanitization

Both `message` and `description` props support HTML content but are sanitized using the `$sanitize` utility to prevent XSS attacks. Safe HTML tags are preserved while malicious scripts are removed.

## Use Cases

**Empty Lists:**
```markup
<AwEmptyContainer
    icon="awesio/folder"
    title="No items found"
    message="Your list is empty. Add items to get started."
/>
```

**No Search Results:**
```markup
<AwEmptyContainer
    icon="awesio/search"
    title="No results found"
    message="Try adjusting your search criteria."
    theme="transparent"
/>
```

**Initial State:**
```markup
<AwEmptyContainer
    icon="awesio/box"
    title="Welcome!"
    message="Start by creating your first project."
    :cta-button="{ text: 'Create Project', icon: 'awesio/plus' }"
/>
```

**Error State:**
```markup
<AwEmptyContainer
    icon="awesio/warning"
    title="Something went wrong"
    message="We couldn't load your data. Please try again."
    :cta-button="{ text: 'Retry', color: 'error' }"
    theme="empty"
/>
```

## Related Components

- `AwCard` - Base card component (used internally with `theme="card"`)
- `AwIcon` - Icon component (used for icon prop)
- `AwButton` - Button component (used for ctaButton)
- `AwHeadline` - Headline component (used for title)
- `AwDescription` - Description component (used for message)

## Notes

- **Import Method:** Global - Available as molecule component
- The component animates in after a 300ms delay on mount
- `theme="card"` uses AwCard wrapper with increased padding
- `theme="empty"` and `theme="transparent"` use plain div wrapper
- Icon size is fixed at 80px when using the icon prop
- Images have max-width of 100% and default width of 16rem (256px)
- The `message` prop takes precedence over `description` if both are provided
- HTML content in message/description is sanitized for security
- CTA button inherits all AwButton props via the ctaButton object