Empty states

Show what could be here and how to start. Never a dead end.

Write by cause

An empty region has a cause, and the cause decides what to say.

First use. Show what could be here, why it helps, and how to start: "Create your first project".
No results. Don't restate the obvious. Offer a way out: check the spelling, try a broader term, clear the filters, or suggest "Did you mean".

No results for 'invoce' Check the spelling or try a broader term. Clear search

<tk-empty-state compact>
  <tk-icon slot="media" name="search"></tk-icon>
  <span slot="title">No results for 'invoce'</span>
  Check the spelling or try a broader term.
  <tk-button slot="actions" size="small">Clear search</tk-button>
</tk-empty-state>

Always offer an action

End with an explicit next step: "Create a board", "Clear filters".
Let the copy and the picture say the same thing, and hint at the content that will fill the space.
Keep the tone positive and calm. No exclamation marks.

Personality, sparingly

A light touch of personality is welcome on rare surfaces, such as a time-out or a logged out page. Keep it out of everyday empty states, where the reader wants the next step.

Do and don't

✅ Do	❌ Don't
"No results for 'invoce'. Check the spelling or try a broader term."	"No results."
"Create your first project" with a New project button	A blank panel with no way forward
"Try creating a board"	"Nothing here!"