Varsel (Alert)

<adb-alert> viser kontekstuell tilbakemelding til brukeren. Komponenten støtter fem varianter, to typer (boks og inline), og valgfri lukkeknapp.

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 fjernes avrunding og varselet strekker 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`	Fjerner border-radius for kant-til-kant-visning
`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>