Content
There are three main properties for configuring text content, title, subtitle, and text.
No Messages Yet
Check back later.
You haven't received any messages yet. When you do, they'll appear here.
Empty states
The v-empty-state component is used to indicate that a list is empty or that no search results were found.
Usage
A basic empty state is composed of a title and a description. It can also include an icon and a button.
<v-empty-state
headline="Whoops, 404"
title="Page not found"
text="The page you were looking for does not exist"
image="https://vuetifyjs.b-cdn.net/docs/images/logos/v.png"
></v-empty-state>ads via vuetify
API
| Component | Description |
|---|---|
| v-empty-state | Primary Component |
Toggle Inline API
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.
Media
Add an icon or image to the empty state to help convey its purpose.
We couldn't find a match.
Try adjusting your search terms or filters. Sometimes less specific terms or broader queries can help you find what you're looking for.
Actions
Add a button to the empty state to help users take action.
Something Went Wrong
There might be a problem with your connection or our servers. Please check your internet connection or try again later. We appreciate your patience.
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.
All Done For Now!
You're all caught up.
Great job on completing all your tasks! This might be a good time to relax or consider planning your next set of goals. If you think of something new, just hit the button below to add a new task.
Custom Actions
By default, only 1 action is displayed through configuration. To add more options, utilize the actions slot.
Manage your inventory transfers
Track and receive your incoming inventory from suppliers
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.
Ready for more?
Continue your learning with related content selected by the Team or move between pages by using the navigation links below.