Empty state

What an empty container says, decided by why it is empty: nothing yet, no matches, or all clear.

Refined portWildEmptyState.vueFeedback/Empty StateWEmptyStateRefined

Try it

Change the reason, and the picture, words and action change with it. Remove a filter, or clear them all.

No sites match these filters

42 sites are hidden. Remove a filter to widen the list.

Reason

Size

Description

Actions

<WildEmptyState
  reason="no-matches"
  title="No sites match these filters"
  description="42 sites are hidden. Remove a filter to widen the list."
  :filters="activeFilters"
  @remove-filter="removeFilter"
  primary-label="Add a site"
  @primary="create"
  secondary-label="Clear filters"
  @secondary="recover"
/>

Only nothing-yet gets a filled button, because creating the first record is its way out. The other two step down to grey.

Three reasons

Pick the reason by why the list is empty. Each has its own picture, words and weight of action.

No sites yet

Add your first logger and its readings appear here within a few minutes.

nothing yet

No sites match these filters

42 sites are hidden. Remove a filter to widen the list.

no matches

No alarms this week

Every site reported inside its thresholds.Checked 2 minutes ago

all clear

The picture is a ghost of what belongs there: skeleton cards, a list under a lens, or a tick when empty is good news.

Sizes

A whole page, the body of a card, or a row in a table.

Connect your first logger

Plug in a WildEye logger, press its button, and it appears here with its first reading.

Use page size when the whole screen has nothing yet. It has a larger picture, title and buttons.

AlarmsThis week

No alarms this week

Every site reported inside its thresholds.Checked 2 minutes ago

Panel size fills a card’s body. The card keeps its header, so people still know what would be here.

Loggers0 of 42

NameLast readingBattery

No loggers match “bore 14”

Check the spelling, or search by serial number.

Inline size sits where the rows would be, so the table keeps its header and shape.

Content

Three parts, each with one job.

Part	Its job	Example
Title	Say what is empty, in the reader’s words.	No sites match these filters
Description	Say why, or what to do next. Never repeat the title.	42 sites are hidden. Remove a filter to widen the list.
Action	One verb and a noun. The way out, not a tour.	Clear filters

Not an error

A list that loaded and came back empty is an empty state. A list that failed to load is an alert.

Couldn’t load sitesThe readings service did not respond. Try again, or check the status page.

the load failed — alert

No sites yet

Add your first logger to start seeing readings.

the load worked and returned nothing — empty state

Empty says there’s nothing here. An error says the product couldn’t tell you.

Filters

On no-matches, show the filters that emptied the list as filter chips. Each × removes one, and its circle fills on hover.

Name how many results the filters hide, so people know removing one is worth it.
Offer Clear filters as the secondary action.

Props

Prop	Type	Default	Description
reason	'nothing-yet' \| 'no-matches' \| 'all-clear'	'nothing-yet'	Why it’s empty. Sets the picture and the action’s weight.
size	'page' \| 'panel' \| 'inline'	'panel'	A whole screen, a card body, or a table row.
title	string	—	What is empty. Required.
description	string	—	Why, or what to do next.
primary-label	string	—	The way out. Filled only on nothing-yet.
secondary-label	string	—	A second, quieter action.
filters	{ id, label }[]	—	no-matches: the filters that emptied the list.
checked-text	string	—	all-clear: a live line such as “Checked 2 minutes ago”.

Tokens

Token	Value	Where it lands
--color-grey-1300	#0A090B	Title.
--color-grey-1000	#4F4D55	Description.
--color-grey-400 / 500	#ECECED / #E6E6E6	Skeleton bars in the picture.
--shadow-group	0 2px 12px -1px …	The ghost cards.
--color-primary	#00AEEF	The “+” tile on nothing-yet.
TONE.ok	#E1FAEA · #C1F4D4 · #019939	Rings and tick on all-clear.
--radius-field	10px	Ghost cards and the “+” tile.