Alerts

Vi bruker gruppenavnet "alerts" om callouts, toasts og notifications. Alerts brukes til å varsle om betingelser, indikere en hendelse og gi tilbakemeldinger på brukerens handlinger.

Callout

Callouts lever blant innholdet på siden og brukes til å utheve spesielt viktig informasjon. De kan ha ulike størrelser og finnes i flere varianter.

  • Lastes med sidens innhold
  • Er del av flyten på siden
  • Overlapper ikke andre elementer
  • Kan fargekodes for semantiske tilstander (suksess, feil, advarsel)
  • Overskrift
  • Beskrivelse (valgfritt)
  • Knapp (valgfritt)
  • Ikon (valgfritt)
  • Kan lukkes (valgfritt)
  • Plasseres blant innholdet på siden

Eksempel på bruk av callout
Eksempler med ulike statuser hvor den blå er informativ og den rød er kritisk

Toast

Toast er en kort og konsis beskjed som dukker opp på skjermen for å gi status på en handling som nettopp har blitt utført (lagret, endret, lagt til, slettet), eller en endring i systemets status (mistet forbindelse, tilkoblet).

  • Ofte brukt for å bekrefte handlinger som ikke lenger er synlige i løsningen
  • Synlig i en angitt tid
  • Flyter over UI, men bør ikke forstyrre viktige elementer
  • Kan fargekodes for semantiske tilstander (suksess, feil, advarsel)
  • Ikon (valgfritt)
  • Kan lukkes (valgfritt)
  • Plasseres ofte nederst i midten av skjermen

Eksempel på toast
Ulike statuser for toast

Confirmations

Confirmations ber brukeren om å bekrefte en handling. De brukes ofte til destruktive handlinger som å slette en bruker eller en mappe.

  • Vises ofte i form av en modal så andre handlinger ikke er tilgjengelige før beslutningen er tatt.
  • Trekk tydelig frem utfall og konsekvens av handlingen.

Eksempel på Confirmation
Eksempel som viser at en bruker er i ferd med å slette en mappe med innhold

Notifications

Notifications blir utløst av noe eksternt. En annen bruker har gjort en handling, eller en endring i systemet du bør vite om.

  • Må kunne sees senere
  • Synlig i en angitt tid
  • Flyter over UI, men bør ikke forstyrre viktige elementer
  • Ikon (valgfritt)
  • Kan lukkes (valgfritt)
  • Plasseres ofte nederst til høyre av skjermen

Eksempel på notifications
Eksempel på mottatt melding