---
title: Empty State
status: decided
type: baseline/pattern
depends_on:
  - foundation/voice
  - foundation/emotional-modes
last_verified: 2026-03-26
---

# Tomt tillstånd

## När du behöver det

En vy som normalt visar innehåll är tom — inga meddelanden, inga bokningar, inga uppgifter. Användaren behöver förstå att det är väntat, inte trasigt.

## Principen

En tom vy utan förklaring läses som ett fel. Den nära experten förklarar vad som hör hemma här och visar vägen vidare. Tomheten är ett tillfälle att orientera — inte en återvändsgränd.

## Strukturen

1. **Vad som hör hemma här** — en mening som förklarar vyns syfte
2. **Vägen vidare** — vad användaren kan göra för att fylla den, eller vad som kommer att dyka upp

## Exempel

✅ "Du har inga meddelanden just nu. Här ser du meddelanden från ditt vårdteam när de skickar dem."

✅ "Här visas dina bokade tider. Du har inga kommande bokningar just nu — vill du boka en tid?"

❌ "Inga resultat."

❌ "Inga meddelanden."

## Tokens

| Token | Roll |
|-------|------|
| `--text-secondary` | Förklaringstext |
| `--text-tertiary` | Dämpad hjälptext |

## Tillgänglighet

Om det tomma tillståndet innehåller en åtgärdslänk ("boka en tid"), se till att den är tydligt markerad som interaktiv — inte bara färgkodad. Undvik att dölja det tomma tillståndet helt för skärmläsare.

## Snabbtest

**Förstår användaren att vyn inte är trasig?** Om inte — förklara vad som hör hemma här.