A list that doesn’t contain any items, or a search that doesn’t display any results, are examples of empty states. Although these states aren’t typical, they should be designed to prevent user confusion.
The most basic empty state displays a non-interactive image and a text tagline. For that you can use an icon, title and an empty state description. Vue Material already provide a nice design for your empty states, but you can always create your own design on top of md-empty-state.
The empty state can be basic or rounded. The rounded variant is recommended only for desktop, as it size is fixed and do not work responsivelly.
The default empty state can be used on any screen size. You can combine designs with icon, label and description, as any of this are optional. It also accepts a default <slot> to pass any arbitrary content, like a button to give an option to continue the screen flow:
Creating project, you'll be able to upload your design and collaborate with people.
The rounded empty state gives a fresh look with a nice background color, to gain the attention of your user.
Anything you snooze will go here until it's time for it to return to the inbox.
You can also combine both layouts with primary or accent colors, to match your theme. Gorgeous!
Anything you mark done will be safely stored here.
Create a Reminder and it will show up here.
The following options can be applied to any empty state:
| Name | Description | Default |
|---|---|---|
| md-icon String | The icon of the empty state. Optional. | null |
| md-label String | The label of the empty state. Works as a title. Optional. | null |
| md-description String | The description of the empty state. Optional. | null |
| md-rounded Boolean | Make the empty state rounded, with a nice background color. | false |
| md-size Number | The rounded width/height size. Only works with md-rounded. | 420 |