Vue Material -

Empty State

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.

Empty State

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:


The rounded empty state gives a fresh look with a nice background color, to gain the attention of your user.


You can also combine both layouts with primary or accent colors, to match your theme. Gorgeous!

Hue Colors

API - md-empty-state

The following options can be applied to any empty state:

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