Status & återkoppling

En pill är ett tillstånd, en badge ett antal, en tagg ett värde användaren valt.

Pillar

Ett tillstånd bär alltid sitt ord. Färg ensam räcker inte.

UtkastPågårKlartVäntar på kundFörsenat

<span class="ws-status-pill ws-status-pill--success">Klart</span>

Med prick eller ikon

Pricken förstärker ordet, den ersätter det inte.

PågårKlartFörsenatSynkadOsynkadI kö

<StatusPill tone="warning" dot>Väntar</StatusPill>
<StatusPill tone="success" icon="CheckmarkFilled">Synkad</StatusPill>

Badges & taggar

Statusetikett som länk

Med href blir etiketten en länk till det den säger något om: en kategori till sin händelse. Samma etikett i vila, understruken under pekaren.

Klientmöte Intern Osorterad

<StatusPill tone="info" href="/calendar/events/412">Klientmöte</StatusPill>
statusPill({ label: "Klientmöte", tone: "info", href: "/calendar/events/412" })

Badge

14399+3Ärenden 7

<span class="ws-badge">14</span>
<span class="ws-badge ws-badge--danger">3</span>

Tagg

Ta-bort-knappen är en riktig <button> med egen etikett.

FörvaltningNyutvecklingVäntar på kundSeptember

<span class="ws-tag">
  <span class="ws-swatch" style="background: …"></span>
  Förvaltning
  <button class="ws-tag__remove" aria-label="Ta bort">…</button>
</span>

Notiser

Ikonen väljs ur tonen — aldrig enbart färg.

Rapporten är skickad

Sju poster på 41,5 timmar gick till fakturaunderlaget för september.

Synkningen mot FreeScout kördes senast 08:12. Nya ärenden dyker upp inom fem minuter.

Budgeten är snart slut

412 av 600 timmar är förbrukade och tre veckor återstår av perioden.

Tiden kunde inte sparas

Perioden är låst sedan den 15:e. Kontakta en administratör för att låsa upp den.

<Notice tone="success" title="Sparat">…</Notice>

Band

ws-notice--band: ett beslut sidan väntar på, över hela bredden av det det gäller — en rapport som väntar på granskning.

Granska innan publicering

Två påståenden saknar underlag.

<div class="ws-notice ws-notice--warning ws-notice--band" role="region" aria-labelledby="granska">
  <svg class="ws-icon ws-notice__icon">…</svg>
  <div class="ws-notice__body">
    <p class="ws-notice__title" id="granska">Granska innan publicering</p>
    <p>Två påståenden saknar underlag.</p>
  </div>
  <div class="ws-notice__actions"><button class="btn btn--primary">Publicera</button></div>
</div>

live bara när den dyker upp

live bara för en notis som dyker upp efter en handling.

Toasts

En feltoast försvinner inte automatiskt.

import { toast } from "@whitespace/malm-ui";

toast.success("Sparat");
toast.error("Kunde inte spara");
toast("Ångra?", { action: { label: "Ångra", onClick: … } });

Laddning

Märket när en sida eller panel laddas första gången, linjen när innehållet uppdateras, spinnern i en knapp eller en mening, skelettet när formen är känd.

Märket

Laddar ärenden…

Laddar…

<Loader />
<Loader size="lg" label="Laddar ärenden…" showLabel />

Linjen

Innehållet står kvar och går att läsa medan det uppdateras.

<section class="panel" aria-busy="true">…</section>

Spinner

<span class="ws-spinner" aria-hidden="true"></span>
<Button variant="primary" busy>Sparar</Button>

Skelett

<div class="ws-skeleton ws-skeleton--title"></div>
<div class="ws-skeleton ws-skeleton--text"></div>

Framsteg

<progress> när värdet är känt, .ws-meter för stapeln i en tabellrad.

I bruk: Tid, budgetstapeln på projekten (components/ShareBar.astro), skriven för hand med style i stället för meter(). Klient: inte än.

Webbplats 2026412 / 600 h

Intranät228 / 240 h

Förvaltning247 / 240 h

<div class="ws-meter" style="--ws-meter-value: 72%"></div>
<div class="ws-meter ws-meter--over" style="--ws-meter-value: 103%"></div>

Kort

--sm: en mätare bredvid sin siffra i en tabellrad.

0,72

<span class="ws-cluster ws-cluster--1 ws-cluster--nowrap">
  <span class="ws-meter ws-meter--sm" style="--ws-meter-value: 72%" role="img" aria-label="72 procent"></span>
  <span class="ws-num">0,72</span>
</span>

Budgetmätare

Hela stapeln i en färg: grön med gott om plats, orange när budgeten nästan är slut, röd när den är över – och mörkare röd för det som gått över.

Webbplats 2026412 / 600 h

Intranät228 / 240 h

Förvaltning300 / 240 h

<div class="ws-meter ws-meter--budget" style="--ws-meter-value: 68%"></div>

<!-- nästan slut: anroparen avgör när, vanligen från fyra femtedelar -->
<div class="ws-meter ws-meter--budget ws-meter--near" style="--ws-meter-value: 95%"></div>

<!-- över budget: skalan är överdraget, strecket är budgeten -->
<div class="ws-meter ws-meter--budget ws-meter--over"
     style="--ws-meter-value: 100%; --ws-meter-limit: 80%"></div>

Bekräftelse

Som GOV.UK: sidan efter att en uppgift är klar. Utfallet är sidans rubrik, och en referens står under den om det finns en.

Tidrapporten är skickad

Referens
TR-2026-39

<Confirmation title="Tidrapporten är skickad">
  Referens<br /><strong>TR-2026-39</strong>
</Confirmation>