Empty states
An empty list is a moment to be a good host: say what isn’t here yet, why, and point to the one thing worth doing next. Warm, short, honest.
Principles
Say what’s missing
Name the thing, plainly: “No classes listed here yet”, not “Nothing to see”. The dancer should know exactly which list is empty.
Say why — if it helps
“yet” does most of the work: the scene is young here, not dead. For filters and search, the why is the filter — repeat the query back.
Offer one next action
One link or button that moves them forward: clear the search, ask the locals, tap “Going?”, enter the competition. Never two competing CTAs.
Never fake it
No placeholder events, no invented winners, no “12k dancers” counters. An honest empty state beats fake fullness (the “no fake friends” rule).
The container
Dashed 2px border in brown at 20% (border-input), translucent white, rounded-2xl, centred. One amber icon, one line of brown-700 sans copy, one red action.
Nothing matches “kizomba vienna”
<div class="text-center py-14 px-6 rounded-2xl border-2 border-dashed border-input bg-white/50">
<Search class="w-8 h-8 mx-auto mb-3 text-secondary" aria-hidden="true" />
<p class="font-sans text-sm text-muted-foreground">Nothing matches “{{ query }}”</p>
<button type="button" class="mt-2 font-sans text-xs font-bold underline text-primary" @click="query = ''">
Clear search
</button>
</div>Inline variant (inside a card or section): drop the box, keep the sentence and the link — see the taster example below.
Examples
Faithful recreations of what the product shows today, with the copy that ships.
No Bachata classes listed here yet — ask the locals where beginners start.
Community chats where the Munich scene organises — WhatsApp, Telegram & more. Join the locals.
Cold start: a city with no WeDance events still gets the human layer — where the scene already talks. (Group names above are illustrative.)
Build your week
Tap “Going?” on classes and socials to plan your dance week in Munich.
Nothing matches “timba lisbon”
Be the first to enter
No Video of the Month yet
No goals yet. One year, one arc, one reason to keep showing up.
Copy patterns
Second person, present tense, a dash instead of a semicolon. “yet” over “no”. The action is a verb the dancer would say.
- Search returns nothing
Nothing matches “{query}” · Clear search
/festivals, /cities, /artists
- Filters exclude everything
No {style} classes listed here yet — ask the locals where beginners start.
City taster
- User hasn’t picked anything
Build your week · Tap “Going?” on classes and socials to plan your dance week in {city}.
WeekDrawer
- Nobody has acted yet
No reviews yet. Be the first. · No Video of the Month yet · Be the first to enter
Reviews, VideoOfMonthCard
- Personal list, empty
No goals yet. One year, one arc, one reason to keep showing up.
/my-plan
- City with no events
Local groups — community chats where the {city} scene organises. Join the locals.
CommunityGroupsSection
Do and don't
No Salsa classes listed here yet —
ask the localsDo — name what’s missing and give one next step.
No data.
Don't — a bare “No data” or “No events match your filters.” with nowhere to go.
Do — show the honest zero and invite people to be first.
Don't — fill the gap with sample events, a fake winner or inflated counts.
Accessibility
- Announce changes. When a filter or search empties a list, wrap the result area in
aria-live="polite"so screen-reader users hear “Nothing matches …” instead of silence. - Icons are decorative (
aria-hidden="true") — the sentence carries the meaning. - The action is a real control:
<button>for in-page actions (clear search),<a>for navigation (ask the locals). Underlined text alone is not a button. - Don’t hide the section entirely when it is the only thing that could help — a missing section gives no clue that anything is wrong.