Alert

En boks som sier noe om helheten: at søknaden ble sendt, at tjenesten er nede, at fristen nærmer seg. Gjelder meldingen ett felt, hører den hjemme under feltet som Error Text eller Help Text.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/alert.css"

Farger

Eksempel

Kode

<div class="fs-alert">
<p class="fs-alert__title">Saken er registrert</p>
<p>Du får svar innen tre uker.</p>
</div>

<div class="fs-alert" data-color="info">
<p>Vi har oppdatert tjenesten. Du må logge inn på nytt.</p>
</div>

<div class="fs-alert" data-color="success">
<p>Søknaden er sendt. Kvittering er på vei til e-posten din.</p>
</div>

<div class="fs-alert" data-color="warning">
<p>Søknadsfristen går ut om tre dager.</p>
</div>

<div class="fs-alert" data-color="danger">
<p class="fs-alert__title">Søknaden ble ikke sendt</p>
<p>Nettverket svarte ikke. Prøv igjen om litt.</p>
</div>

data-color	Brukes til
(utelatt)	Nøytral opplysning
info	Noe brukeren bør vite, men som ikke krever handling
success	Noe gikk bra
warning	Noe krever oppmerksomhet, men stopper ingenting
danger	Noe gikk galt, eller stopper brukeren

Rolle når meldingen kommer underveis

Rollen er ikke en del av data-color, fordi den avhenger av når meldingen kommer, ikke av hva den betyr.

Situasjon	Hva du setter
Meldingen står i markupen når siden lastes	Ingen rolle
Meldingen dukker opp mens brukeren holder på	role="status"
Brukeren må stoppe og gjøre noe nå	role="alert"

<div class="fs-alert" data-color="danger" role="alert">
  <p class="fs-alert__title">Søknaden ble ikke sendt</p>
  <p>Nettverket svarte ikke. Prøv igjen om litt.</p>
</div>

role="alert" avbryter det skjermleseren holder på med. Bruk den bare når avbruddet er berettiget. role="status" venter til brukeren er ferdig med setningen sin.

Elementet må stå i DOM-en før du fyller det med tekst. Legger du inn hele boksen ferdig utfylt, rekker ikke skjermleseren å se endringen.

TypeScript

import { fs, type AlertColor } from "@fristil/designsystem"

const boks = document.querySelector<HTMLElement>("#status")

function vis(farge: AlertColor, tekst: string) {
  fs.setAttributes(boks, fs.alert({ color: farge }))
  boks.textContent = tekst
}

Kommer fargen fra et svar utenfra, valider den med fs.alert.isColor(x). fs.alert.title gir klassen på overskriften. Se Typesikker bruk.

Klasser du kan style

Klasse	Hva det er
.fs-alert	Selve boksen. Fargen kommer fra data-color.
.fs-alert__title	Overskriften inne i boksen

Variabel	Standard
--fs-alert-padding	var(--size-3) var(--size-4)
--fs-alert-radius	var(--size-1)
--fs-alert-accent	var(--size-1)

Fargen ligger i en strek på kanten framfor i hele flaten, så brødteksten beholder kontrasten mot sideflaten i begge temaer. Se Tilpasning.

Tilgjengelighet

• Fargen alene sier ingenting. Teksten må bære beskjeden også for den som ikke ser forskjell på grønt og rødt.
• Én melding om gangen. Tre bokser over hverandre leses som støy, og brukeren finner ikke den som gjelder.
• Si hva brukeren skal gjøre. «Prøv igjen om litt» hjelper der «En feil oppstod» ikke gjør det.
• Skal meldingen kunne lukkes, gi lukkeknappen en tekst som sier hva som lukkes, ikke bare et kryss.