StatusDot

@/components/ui/StatusDot

Liten fargeprikk (8px) for en tilstand inline i tekst eller en rad — «på nett», «synkronisert», «venter».

Når brukes den

Bruk inline foran et navn/en rad for en tilstand som ikke trenger et helt Badge-ord — «Aktiv nå», tilkoblingsstatus, synk-status.
`pulse` KUN for en tilstand som faktisk er live/pågående akkurat nå (aktiv synkronisering, noen som skriver) — ikke for en stabil, avsluttet status.
Sett `label` når teksten skal stå der uansett (anbefalt for lesbarhet); bruk `ariaLabel` alene KUN når prikken står helt for seg selv uten synlig tekst ved siden av.
Ikke bruk til en tilstand som fortjener et helt ord — det er Badge.

Toner

AktivVenterFeiletNyInaktiv

<StatusDot tone="success" label="Aktiv" />

pulse — live tilstand

Pulserende ring bak prikken. Statisk under prefers-reduced-motion.

Synkroniserer nå

<StatusDot tone="success" pulse label="Synkroniserer nå" />

Uten synlig tekst

`ariaLabel` bærer betydningen for skjermleser når det ikke finnes en synlig `label` ved siden av.

Heisservice AS

<StatusDot tone="success" ariaLabel="Aktiv leverandør" />

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

tone

'success' | 'warning' | 'error' | 'gray' | 'accent'

'gray'

Farge hentet fra tonens -text-token (900-steget, ≥3:1 som grafikk).

pulse

boolean

—

Pulserende ring rundt prikken (statisk ved redusert bevegelse). Kun for aktive/live tilstander.

label

string

—

Kort tekst ved siden av prikken (label-13, text-secondary).

ariaLabel

string

—

Tilgjengelig navn når det IKKE finnes en synlig label.

className

string

—

Ekstra klasser.