Statusbeskjed (Alert)

En statusbeskjed (alert) brukes når det er behov for å tiltrekke brukerens oppmerksomhet for noe som er midlertidig. Beskjeden skal være kort og konkret.

Statusbeskjeden kan opptre globalt på siden eller som en del av innholdet. Plasser statusbeskjed nærme konteksten av det den skal gi brukeren respons på eller informasjon om.

En statusbeskjed kan inneholde mange ulike typer innhold.

Sørg for å bruke riktig type statusbeskjed til riktig innhold. Dersom det ikke er mulighet å tilpasse statusbeskjedenens farge og ikon til ulikt innhold, bruk da den nøytrale varianten.

Lukke statusbeskjed

Om brukeren skal ha mulighet til å fjerne statusbeskjeden eller ikke må vurderes i hver enkelt sammenheng.

Som hovedregel anbefales det ikke at brukeren kan lukke statusbeskjeder som er varsler og feil, spesielt dersom meldingen inneholder informasjon om hva som må utbedres dersom dette kan utføres av brukeren - eller hvor varslet forsvinner når feilen er fikset.

Dato

Vis kun dato dersom dette gir ekstra informasjon til brukeren. Som hovedregel er det ikke nødvendig å vise dato annet enn ved kunngjøringer eller ved hendelser som er planlagt framover i tid - eksempelvis planlagt vedlikeholde.

Inline alert

Inline alerts kan brukes i kontekster hvor innrammingen blir for voldsom eller det ikke er tilstrekkelig med plass. Merk at denne da er mindre synlig enn ved bruk av ramme. Brukes gjerne i kontekst av at brukeren har utført en handling som leder til meldinger.

Eksempel

30. april 2025

En ny versjon av Artskart er lansert med forbedret søkefunksjonalitet og nye kartlag.

Varianter

Fare (danger)

Brukes for feilmeldinger og kritiske varsler.

Endringene kunne ikke lagres. Prøv igjen eller kontakt support.

Advarsel (warning)

Brukes for advarsler som krever oppmerksomhet.

31. januar 2025 kl. 08:00 – 10:00

Tjenesten vil være utilgjengelig i denne perioden.

Informasjon (info)

Brukes for nøytral informasjon.

Du kan bruke filteret til å begrense søkeresultatene.

Suksess (success)

Brukes for positive tilbakemeldinger.

Observasjonen er registrert og vil være synlig i Artskart innen kort tid.

Nøytral (neutral)

Brukes for kunngjøringer og generell informasjon.

15. mars 2025

Artsdatabanken lanserer nytt designsystem for alle digitale tjenester.

Typer

Standard (boks)

Standard visning med ramme, bakgrunnsfarge og venstre kantlinje.

Dette er standard (boxed) visning med full ramme og bakgrunn.

Inline (medium)

Kompakt visning med kun ikon og tekst — ingen bakgrunn eller ramme.

Inline (liten)

Mindre versjon av inline — brukes i trange kontekster.

Med global-attributtet strekker varselet seg kant-til-kant.

30. april 2025 kl. 14:00

Artskart opplever ustabilitet. Vi jobber med å løse problemet.

Lukkeknapp

Sett closable for å vise lukkeknapp. Klikk sender adb-close-eventet. Med auto-close skjuler komponenten seg selv i tillegg.

Klikk X-knappen for å skjule dette varselet (auto-close).

API

Egenskaper

Egenskap	Type	Standard	Beskrivelse
`variant`	`'danger' \| 'warning' \| 'info' \| 'success' \| 'neutral'`	`'info'`	Semantisk variant som styrer farge og ikon
`type`	`'default' \| 'inline'`	`'default'`	Visningstype — boks eller inline
`size`	`'sm' \| 'md'`	`'md'`	Størrelse (kun inline-typen)
`heading`	`string`	`''`	Overskrift (alternativ til heading-slot)
`global`	`boolean`	`false`	Strekker varselet kant-til-kant (full bredde)
`closable`	`boolean`	`false`	Viser lukkeknapp
`auto-close`	`boolean`	`false`	Skjuler komponenten ved lukking (krever `closable`)

Slots

Slot	Beskrivelse
(default)	Brødtekst/innhold (kun default-type)
`heading`	Overskriftstekst (alternativ til `heading`-attributt)
`meta`	Sekundær info under overskrift (f.eks. dato) — rendres i Space Mono 12px

CSS-parts

Part	Beskrivelse
`container`	Ytre alert-container
`icon`	Ikon-wrapper
`content`	Innholdsområdet
`heading`	Overskrift-wrapper
`meta`	Meta-slot-wrapper
`body`	Brødtekst-wrapper
`close`	Lukkeknappen

Events

Event	Beskrivelse
`adb-close`	Utløses når lukkeknappen klikkes

Tilgjengelighet (WCAG 2.1 AA)

Krav	Implementasjon
Semantisk rolle	`role="alert"` for danger/warning (assertiv), `role="status"` for info/success/neutral (høflig)
Lukkeknapp	`aria-label="Lukk"` for skjermlesere
Fokusstil	Synlig fokusring på lukkeknapp (2px outline + 4px gap)
Kontrast	Alle tekst/bakgrunn-kombinasjoner oppfyller 4.5:1 minimum
Tastatur	Lukkeknapp nås med Tab og aktiveres med Enter/Space

Installasjon

npm install @artsdatabanken/components

// Full bundle
import '@artsdatabanken/components';

// Kun alert (tree shaking)
import '@artsdatabanken/components/alert';

<adb-alert variant="info" closable heading="Informasjon">
  <span slot="meta">Dato: 30. april 2025</span>
  <p>Her kan du legge inn mer informasjon.</p>
</adb-alert>