Kilden

Alert

Kildekode på GitHub · Les som Markdown

Alert brukes for å vise kontekstuell informasjon som krever brukerens oppmerksomhet. Den støtter flere semantiske varianter for ulike typer meldinger — fra nøytral informasjon til feilmeldinger.

Importering

import { Alert, AlertTitle, AlertDescription } from "@kilden/designsystem";

Grunnleggende bruk

<Alert>
<AlertTitle>Merknad</AlertTitle>
<AlertDescription>
  Dette er en standard alert for generell informasjon.
</AlertDescription>
</Alert>

Varianter

Info

<Alert variant="info">
<AlertTitle>Tips</AlertTitle>
<AlertDescription>
  Du kan bruke tastatursnarvei Ctrl+K for å åpne søk.
</AlertDescription>
</Alert>

Success

<Alert variant="success">
<AlertTitle>Fullført</AlertTitle>
<AlertDescription>
  Endringene dine er lagret og publisert.
</AlertDescription>
</Alert>

Warning

<Alert variant="warning">
<AlertTitle>Advarsel</AlertTitle>
<AlertDescription>
  Denne komponenten er eksperimentell og kan endres uten forvarsel.
</AlertDescription>
</Alert>

Danger

<Alert variant="danger">
<AlertTitle>Feil</AlertTitle>
<AlertDescription>
  Kunne ikke lagre endringene. Prøv igjen senere.
</AlertDescription>
</Alert>

Alle varianter samlet

<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<Alert>
  <AlertTitle>Default</AlertTitle>
  <AlertDescription>Nøytral informasjon.</AlertDescription>
</Alert>
<Alert variant="info">
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>Nyttig informasjon å vite om.</AlertDescription>
</Alert>
<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Handlingen var vellykket.</AlertDescription>
</Alert>
<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Vær oppmerksom på dette.</AlertDescription>
</Alert>
<Alert variant="danger">
  <AlertTitle>Danger</AlertTitle>
  <AlertDescription>Noe gikk galt.</AlertDescription>
</Alert>
</div>

Kun beskrivelse

AlertTitle er valgfri — du kan bruke Alert med kun en beskrivelse.

<Alert variant="info">
<AlertDescription>
  Husk å kjøre testene før du pusher koden din.
</AlertDescription>
</Alert>

Bruksanbefalinger

Bruk riktig variant for konteksten

Velg variant basert på meldingstypen: info for tips, success for bekreftelser, warning for advarsler og danger for feil.

Ikke bruk danger for advarsler

Danger er for faktiske feil. Advarsler som 'eksperimentell' eller 'deprecated' bør bruke warning.

Hold teksten kortfattet

Alerts bør ha en tydelig tittel og kort beskrivelse. Lengre innhold hører hjemme i selve siden.

Ikke stable for mange alerts

For mange alerts på én side reduserer effekten. Prioriter de viktigste meldingene.

Tilgjengelighet

  • Bruker role="alert" som signaliserer viktig innhold til skjermlesere
  • Skjermlesere vil typisk annonsere innholdet umiddelbart
  • Bruk AlertTitle for å gi en tydelig overskrift

Props

Alert

PropTypeDefaultBeskrivelse
variant"default" | "info" | "success" | "warning" | "danger""default"Visuell stil og farge

AlertTitle

Arver alle props fra <h5>.

AlertDescription

Arver alle props fra <div>.