Designsystemet Flutter

Utseende

DsAlert ​

Varselboks med fire alvorlighetsgrader for å kommunisere viktig informasjon til brukeren.

Bruk ​

Når bør du bruke DsAlert? ​

  • For å vise viktige meldinger som brukeren bør legge merke til.
  • For feilmeldinger, advarsler, suksessmeldinger eller informasjonsmeldinger.
  • Når meldingen gjelder hele siden eller en større seksjon.

Når bør du unngå DsAlert? ​

  • For inline-feilmeldinger på enkeltfelt — bruk error-egenskapen på skjemakomponenter i stedet.
  • For kortvarige varsler som forsvinner automatisk — bruk en toast/snackbar.
  • For dekorasjon eller generell tekst — bruk vanlige tekstelementer.

Eksempler ​

Informasjonsvarsel ​

DsAlert — interaktiv forhåndsvisning
Åpne i nytt vindu ↗
dart
DsAlert(
  severity: DsSeverity.info,
  title: Text('Informasjon'),
  child: Text('Systemet oppdateres i kveld kl. 22:00.'),
)

Advarsel ​

dart
DsAlert(
  severity: DsSeverity.warning,
  title: Text('Advarsel'),
  closable: true,
  onClose: () => skjul(),
  child: Text('Vær oppmerksom på dette.'),
)

Feilmelding ​

dart
DsAlert(
  severity: DsSeverity.danger,
  title: Text('Feil'),
  child: Text('Noe gikk galt. Prøv igjen senere.'),
)

Suksessmelding ​

dart
DsAlert(
  severity: DsSeverity.success,
  title: Text('Lagret'),
  child: Text('Endringene dine er lagret.'),
)

Retningslinjer ​

  • Velg riktig alvorlighetsgrad basert på innholdets viktighet.
  • Bruk closable kun for meldinger som brukeren trygt kan avvise.
  • Hold meldingsteksten kort og handlingsrettet.

Tekst ​

  • Bruk en kort, beskrivende tittel som oppsummerer meldingen.
  • Innholdsteksten bør gi kontekst og eventuelt foreslå neste steg.

Har du innspill til denne komponenten? Send innspill på GitHub