---
title: Chat Bubble
status: decided
type: baseline/pattern
depends_on:
  - baseline/patterns/chat-response-simple
  - foundation/voice
last_verified: 2026-05-06
---

# Chat-bubbla

## När du behöver det

Det visuella skalet runt ett chat-meddelande. `chat-response-simple.md` definierar *orden*; den här definierar *bubblan som bär dem* — form, färg, alignment, rolletikett, kolumnbredd och knappval inuti.

## Principen

Patientens röst och Aleris röst får olika visuell tyngd. Aleris talar — bubblan är ett kort med vit yta, kant och skugga, som vilket annat informationsblock som helst på en kommunikativ yta. Patienten talar — bubblan är en mjuk färgad ton (petrol-100), inte ett kort. Två kort sida vid sida skulle få samtalet att kännas som en formell utväxling. En ton + ett kort gör att Aleris-svaret läser som *svaret*, inte som ena halvan av en dialog.

## Strukturen

1. **Rolletikett** — "Du" eller "Aleris assistent" (eller mottagningens namn). Liten, halvfetad, sekundärfärg.
2. **Bubbla**
   - **Patient (du):** petrol-100-ton, ingen kant, ingen skugga, höger-justerad.
   - **Aleris (assistent):** kort-kluster — vit bakgrund (`--card-bg`), kant (`--card-border-rule`), skugga (`--card-shadow`), vänster-justerad.
3. **Innehåll** — orden enligt `chat-response-simple.md`.
4. **(Valfritt) Nästa-steg-knapp** — `--button-outline-*`, aldrig `--button-primary-*`. Se "Knappval" nedan.

## Knappval i bubblan

Sidan har redan en primär CTA någon annanstans (hero, formulär, knapp i sidfoten). Chatten får inte konkurrera med den — det skulle bryta regeln om en primär CTA per skärm.

- **Konkret nästa-steg som länk:** outline-knapp (`--button-outline-bg/-text/-border/-padding-x/-padding-y/-font-size/-font-weight`).
- **Information som inte kräver klick:** ingen knapp. En kort fras med en inline-länk räcker.

Ingen primär (orange) knapp i en chat-bubbla på en sida som har en hero-CTA.

## Layout

- **Bubbel-radius:** `--radius-m` (8px). Interaktiv-tier — bubblan ligger mellan container och interaktivt element, och 8px läser varmare än container-tierens 4px utan att bli dekorativt.
- **Bubbel-padding:** `--spacing-md` (24px).
- **Avstånd mellan bubblor:** `--spacing-sm` (16px) som default; `--spacing-md` (24px) mellan turer (du → svar → du).
- **Maxbredd per bubbla:** `min(100%, 480px)` — håller editorial-läsbarheten utan att sträcka rader för långt över skärmen.
- **Maxbredd för hela chat-kolumnen:** 600px. Bredare än kort-mönstret (480px) eftersom svar är prosa, inte etikett/värde-par.
- **Inom-bubble-spacing:** `--spacing-2xs` (8px) mellan rolletikett och innehåll, mellan stycken, och mellan sista stycket och knappen.

## Exempel

✅
> **Du**
> *(petrol-100-bubbla, höger)*
> Var hittar jag mitt provsvar?
>
> **Aleris assistent**
> *(vit bubbla med kant + skugga, vänster)*
> Provsvaret finns på Mina sidor under fliken Provsvar. Det publiceras oftast 1–3 vardagar efter provtagningen, och du får ett mejl så snart svaret är klart.
>
> Är det mer än fem vardagar sedan provet togs och svaret saknas? Skicka ett meddelande till din mottagning via Mina sidor, så följer vi upp det åt dig.
>
> [Öppna Mina sidor]  *(outline-knapp)*

— Aleris-svaret är ett kort, patientens fråga är en ton. Ingen primär knapp; outline för det konkreta nästa steget.

❌
> **Du** *(kort)*
> Var hittar jag mitt provsvar?
>
> **Aleris assistent** *(kort)*
> Hej! Tack för din fråga. Logga in på Mina sidor.
>
> [Logga in]  *(orange primär knapp)*

— två kort gör samtalet formellt; "Hej" och "Tack för din fråga" mot `chat-response-simple`; primär knapp konkurrerar med sidans CTA.

## Tokens

| Token | Roll |
|-------|------|
| `--color-petrol-100` | Patient-bubbla bakgrund |
| `--card-bg` / `--card-border-rule` / `--card-shadow` | Aleris-bubbla (kort-kluster) |
| `--color-petrol-500` | Bubbel-textfärg (båda) |
| `--text-secondary` | Rolletikett-färg |
| `--type-small-size` / `--type-small-weight` | Rolletikett |
| `--type-body-size` / `--type-body-line-height` | Bubbel-text |
| `--radius-m` | Bubbel-radius |
| `--spacing-md` | Bubbel-padding |
| `--spacing-sm` | Avstånd mellan bubblor |
| `--spacing-2xs` | Spacing inom bubbla |
| `--button-outline-*` | Nästa-steg-knapp i bubbla (aldrig primary) |

## Tillgänglighet

- Chat-listan är `<ol role="list">` — ordningen är meningsfull (turerna i ett samtal).
- Varje bubbla är en `<article aria-labelledby="...">` så skärmläsare kan navigera mellan dem.
- Rolletiketten har ett unikt `id` som `aria-labelledby` pekar på.
- Färgen ensam bär aldrig avsändarrollen — texten "Du" / "Aleris assistent" ska alltid synas.
- Outline-knappen i bubblan har minst 44px höjd och tydlig fokusring.

## Snabbtest

**Vet en skärmläsaranvändare på första bubblan vem som talar och vad svaret är?** Och: **konkurrerar den här bubblans nästa-steg med sidans primära CTA?** Om någondera tvekar — tillbaka till strukturen.