Empty states
The v-empty-state component is used to indicate that a list is empty or that no search results were found.
TIP
This feature was introduced in v3.6.0
Usage
A basic empty state is composed of a title and a description. It can also include an icon and a button.
API
| Component | Description |
|---|---|
| v-empty-state | Primary Component |
Guide
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.
Props
The v-empty-state component has a multitude of props that allow you to customize its appearance and behavior.
Content
There are three main properties for configuring text content, title, subtitle, and text.
Media
Add an icon or image to the empty state to help convey its purpose.
Actions
Add a button to the empty state to help users take action.
Slots
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 |
Default
The default slot is positioned between text and actions.
Title
It's simple to customize the font-sizing of the title using utility classes.
Custom Actions
By default, only 1 action is displayed through configuration. To add more options, utilize the actions slot.
Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-empty-state component.
Astro dog
This example demonstrates how to use the v-empty-state component to create a fun and engaging empty state.
Astro cat
This example utilizes components such as v-tabs and v-window to create a more complex empty state.