Hoppa till innehållet
Inställningar:

Åtgärder

Knappar

En primär per vy. Ghost i toolbars, danger bara för det som raderar. Alla har kant eller fyllning i vila: en knapp ser ut som en knapp innan man pekar på den.

<button class="btn btn-primary">Spara</button>
<button class="btn btn-secondary">Avbryt</button>
<button class="btn btn-ghost">Mer</button>
<button class="btn btn-danger">Ta bort</button>
Med ikon

En ikonknapp utan label är ett byggfel.

<Button icon="Add" variant="primary">Nytt ärende</Button>
<Button iconEnd="ChevronDown">Välj kund</Button>
<Button icon="TrashCan" iconOnly label="Ta bort" variant="ghost" />

Länk eller knapp

Med href blir det ett <a>, annars ett <button>. Navigerar det är det en länk.
Länk till en annan webbplats

Öppnas i en ny flik: Launch-ikonen efter texten, och en skärmläsare får höra det.

<ExternalLink href="https://handbook.whitespace.se">Handboken</ExternalLink>

Storlekar

Tre. Den stora är 2,75 rem — träffytan på en telefon.

<Button size="sm|md|lg">…</Button>

Tillstånd

Arbetar
<Button variant="primary" busy>Spara</Button>
Påslagen

En växlingsknapp som är på har aria-pressed="true": samma grå steg som ett valt segment, med kant.

<button class="btn btn--secondary" aria-pressed="true">Rotera</button>
Stilla fara

btn--ghost btn--danger: en borttagning i slutet av en rad: kant som andra stilla knappar, röd text.

<button class="btn btn--ghost btn--danger btn--sm">Ta bort</button>

Grupper

Angränsande knappar som delar en kant.

<div class="ws-btn-group">
  <button class="btn btn-secondary">Exportera</button>
  <button class="btn btn-secondary btn--icon" aria-label="Fler format">…</button>
</div>

Toolbar

Raden ovanför en tabell eller inne i en panelrubrik.

<div class="ws-toolbar-row">
  <button class="ws-toolbar-action">…</button>
  <span class="ws-spacer"></span>
  <button class="btn btn-primary btn--sm">…</button>
</div>
Fält på en rad

ws-toolbar-row--fields: fält med etikett och deras knapp, med underkanterna i linje. ws-field--grow tar det som blir över, ws-field--auto är så bred som sin kontroll och ws-input-group--search tar raden upp till en sökfrågas längd.

<form class="ws-toolbar-row ws-toolbar-row--fields">
  <label class="ws-field ws-field--grow"><span class="ws-field__label">Webbplats</span><select>…</select></label>
  <label class="ws-field ws-field--auto"><span class="ws-field__label">Från</span><input type="date"></label>
  <button class="btn btn--secondary">Visa</button>
</form>
Sök bland filter

Står sökrutan i en rad med fält har den en etikett som de andra, så att rutorna står i linje: ett fält i sin egen form.

<Field id="q" label="Sök" form={{ action: "/clients" }}>
  <div class="ws-input-group ws-input-group--search">
    <span class="ws-input-group__affix"><Icon name="Search" /></span>
    <input id="q" type="search" name="q" placeholder="Namn eller id" />
  </div>
</Field>

Segmenterad kontroll

En vy av samma sak — Dag/Vecka, Aktiva/Arkiverade.

<div class="ws-segmented" role="group" aria-label="Period">
  <button type="button" aria-pressed="true">Dag</button>
  <button type="button" aria-pressed="false">Vecka</button>
</div>

Flikar

Piltangenterna flyttar mellan flikarna; bara den valda ligger i tabbordningen.

Tre ärenden väntar på svar.

<div class="ws-tabs" role="tablist" data-malm-tabs>
  <button role="tab" aria-selected="true" aria-controls="p1" id="t1">Översikt</button>
  …
</div>
<div class="ws-tab-panel" role="tabpanel" id="p1" aria-labelledby="t1">…</div>
På innehållets linje

ws-tabs--flush: flikar som står på linjen till det de växlar — ett dokument, ett papper — utan egen linje under, så att den valda öppnar sig in i det.

Innehållet börjar på flikarnas linje.

<nav class="ws-tabs ws-tabs--flush" aria-label="Rapporten">
  <a href="?view=document" aria-current="page">Rapporten</a>
  <a href="?view=process">Så togs den fram</a>
</nav>

Paginering

Totalsumman hör till komponenten.

<nav class="ws-pagination" aria-label="Sidor">…</nav>

Period

En period är en plats: stegen är länkar, så veckan går att bokmärka och skicka vidare. Ett datum skrivs alltid helt — 2026-08-01, aldrig 2026-08.

<nav class="ws-period" aria-label="Period">
  <a class="ws-period__step" href="?period=2026-08-01" aria-label="Föregående">‹</a>
  <span class="ws-period__label" aria-current="true">september 2026</span>
  <a class="ws-period__step" href="?period=2026-10-01" aria-label="Nästa">›</a>
</nav>
Versal och intervall

Etiketten börjar med versal: "Vecka 39", "Last 30 days". ws-period--capitalize ger varje ord versal, för svenska månadsnamn. ws-period__range är två datum och deras knapp bredvid stegaren.

<nav class="ws-period ws-period--capitalize" aria-label="Period">…</nav>
<form class="ws-period__range">
  <label class="ws-field"><span class="ws-field__label">Från</span><input type="date" name="from"></label>
  <label class="ws-field"><span class="ws-field__label">Till</span><input type="date" name="to"></label>
  <button class="btn btn--secondary">Visa</button>
</form>

Periodväljare

Hela raden en rapports period väljs på: sidans egen kontroll först, enheten i mitten och sist vägen tillbaka till nu, stegaren och de små länkarna. Mitten står i mitten vad sidorna än håller. En enhet ritar ingen väljare.

Denna veckaAnpassadAllt
Denna månad
<Period
  label="Vecka 41" prev={{ href: "?period=2026-W40" }} next={{ href: "?period=2026-W42" }}
  units={[{ label: "Vecka", href: "…", current: true }, { label: "Månad", href: "…" }, …]}
  now={{ label: "Denna vecka" }}            // ingen href: här är vi redan
  extras={[{ label: "Anpassad", href: "…" }, { label: "Allt", href: "…" }]}
>
  <select aria-label="Visa">…</select>    // sidans egen kontroll
</Period>

period({ label, prev, next, units, now, extras, range, startHtml })
Ett eget intervall

range lägger två datum under raden, som ett GET-formulär som bär sidans övriga parametrar.

AnpassadAllt
<Period
  units={…}
  extras={[{ label: "Anpassad" }, { label: "Allt", href: "…" }]}
  range={{ action: "/aktiviteter", id: "period",
           from: { name: "fran", value: "2026-09-01" }, to: { name: "till", value: "2026-10-15" },
           hidden: [["vy", "alla"]] }}
/>

Dagsrad

Veckan som sju mål. Märket under datumet är en form, aldrig färg ensam.

<nav class="ws-day-strip" aria-label="Vecka 39">
  <a class="ws-day-strip__day" href="?dag=2026-09-21" aria-current="date">
    <span class="ws-day-strip__name">mån</span>
    <span class="ws-day-strip__date">21</span>
    <span class="ws-day-strip__mark ws-day-strip__mark--done"><span class="ws-sr-only">klar</span></span>
  </a>
</nav>