packages/docs/src/pages/en/components/empty-states.md
The v-empty-state component is used to indicate that a list is empty or that no search results were found.
A basic empty state is composed of a title and a description. It can also include an icon and a button.
<ExamplesUsage name="v-empty-state" /> <PromotedEntry />| Component | Description |
|---|---|
| v-empty-state | Primary Component |
The v-empty-state component is used to indicate that a page or list is empty or that no search results were found. It can be used in a variety of contexts, such as a list of items, a search results page, or a page with no content.
The v-empty-state component has a multitude of props that allow you to customize its appearance and behavior.
There are three main properties for configuring text content, title, subtitle, and text.
<ExamplesExample file="v-empty-state/prop-content" />Add an icon or image to the empty state to help convey its purpose.
<ExamplesExample file="v-empty-state/prop-media" />Add a button to the empty state to help users take action.
<ExamplesExample file="v-empty-state/prop-actions" />The v-empty-state component has numerous slots that make it easy to customize the default behavior.
| Slot | Description |
|---|---|
| 1. Default | The default slot |
| 2. Media | The media slot is for images or icons |
| 3. Title | The main title slot |
| 4. Subtitle | The subtitle slot |
| 5. Text | The text slot |
| 6. Actions | The actions slot |
The default slot is positioned between text and actions.
<ExamplesExample file="v-empty-state/slot-default" />It's simple to customize the font-sizing of the title using utility classes.
<ExamplesExample file="v-empty-state/slot-title" />By default, only 1 action is displayed through configuration. To add more options, utilize the actions slot.
<ExamplesExample file="v-empty-state/slot-actions" />The following are a collection of examples that demonstrate more advanced and real world use of the v-empty-state component.
This example demonstrates how to use the v-empty-state component to create a fun and engaging empty state.
This example utilizes components such as v-tabs and v-window to create a more complex empty state.
<ExamplesExample file="v-empty-state/misc-astro-cat" />