Alert

const Preview = () => {
  return <Alert>En beskjed det er viktig at brukeren ser</Alert>;
};

render(<Preview />)

Bruk Alert når

• det er korte og informative tidsbegrensede varsler
• det er informasjon om feil som kun påvirker én del av systemet eller en mindre funksjon
• det oppstår tilkoblingsproblemer eller API-feil som vil løse seg med en ny innlasting av siden

Unngå Alert når

• feilen hindrer all videre bruk av tjenesten, bruk feilside i stedet
• du skal gjøre brukeren oppmerksom på feil i enkeltfelt, bruk heller komponentens egen feilmelding ValidationMessage
• varslene er statiske infobokser, bruk heller Card
• flere feilmeldinger skal oppsummeres, bruk heller ErrorSummary

For mer helhetlige retningslinjer for bruk av varsler i tjenester, se mønsteret for Systemvarsler. Der finner du eksempler og anbefalinger for når du skal bruke Alert, og når andre løsninger passer bedre.

Eksempel

Alert kan brukes til fire ulike budskap: Informasjon, suksess, advarsel og feilmelding.

Informasjon

Bruk info når du vil gi brukeren nøytral og nyttig informasjon.

const VariantInfo = () => (
  <Alert data-color='info'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Har du husket å bestille passtime?
    </Heading>
    <Paragraph>
      Det er lange køer for å bestille pass om dagen, det kan være lurt å
      bestille i god tid før du skal reise.
    </Paragraph>
  </Alert>
);

render(<VariantInfo />)

Suksess

Bruk success når du vil bekrefte at brukeren har fullført en oppgave, at handlingen var vellykket.

const VariantSuccess = () => (
  <Alert data-color='success'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Gratulerer! Du kan nå starte selskapet ditt
    </Heading>
    <Paragraph>
      Det ser ut til at regnestykket går i pluss og at du har det som skal til
      for å starte selskapet ditt.
    </Paragraph>
  </Alert>
);

render(<VariantSuccess />)

Advarsel

Bruk warning når du vil at brukeren skal foreta en bestemt handling eller for å advare dem om noe viktig.

const VariantWarning = () => (
  <Alert data-color='warning'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Vi har tekniske problemer
    </Heading>
    <Paragraph>
      Det gjør at du kan bli avbrutt mens du fyller ut skjemaet. Vi jobber med å
      rette problemene.
    </Paragraph>
  </Alert>
);

render(<VariantWarning />)

Feilmelding

Bruk danger for å informere om noe som er kritisk eller som hindrer brukeren i å komme videre.

const VariantDanger = () => (
  <Alert data-color='danger'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Det har skjedd en feil
    </Heading>
    <Paragraph>
      Vi klarer ikke å hente informasjonen du ser etter akkurat nå. Prøv igjen
      litt senere. Hvis vi fortsatt ikke klarer å vise informasjonen du trenger,
      tar du kontakt med kundeservice på telefon 85 44 32 66.
    </Paragraph>
  </Alert>
);

render(<VariantDanger />)

Med og uten overskrift

Hvis meldingen er lenger enn en setning kan det være nyttig å bruke en overskrift til å fremheve det viktigste. Dette kan gjøres med Heading. Husk å velge riktig overskriftsnivå ut fra plassen Alert har i innholdsstrukturen på siden.

const WithHeading = () => (
  <Alert>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Har du husket å bestille passtime?
    </Heading>
    <Paragraph>
      Det er lange køer for å bestille pass om dagen, det kan være lurt å
      bestille i god tid om du trenger pass til sommeren.
    </Paragraph>
  </Alert>
);

render(<WithHeading />)

Dersom tittel og beskrivelse gjentar det samme er det bedre å bruke en enkel setning uten overskrift.

const WithOnlyHeading = () => (
  <Alert data-color='warning'>
    <Paragraph> Du har 7 dager igjen på å fullføre søknaden.</Paragraph>
  </Alert>
);

render(<WithOnlyHeading />)

Med lenke

Du kan ha en lenke i Alert hvis det hjelper brukeren med å løse oppgaven. Men vær obs på at en lenke tar brukeren ut av tjenesten, så bruk lenke kun når det er absolutt nødvendig, for eksempel hvis du vil at brukeren skal åpne et skjema eller utføre en viktig oppgave.

const MedLenke = () => (
  <Alert data-color='warning'>
    <Heading
      level={2}
      data-size='xs'
      style={{
        marginBottom: 'var(--ds-size-2)',
      }}
    >
      Søknadsfristen går ut om 3 dager
    </Heading>
    <Paragraph>
      Fristen for å søke opptak til utdanning er 15. april.{' '}
      <Link href='#'>Søk nå</Link>
    </Paragraph>
  </Alert>
);

render(<MedLenke />)

Retningslinjer

Alert brukes for å vise viktige meldinger som krever oppmerksomhet, men ikke nødvendigvis handling. Den kan brukes til å informere brukeren om status, endringer eller problemer i en løsning. Meldingen vises tydelig og skiller seg visuelt fra resten av innholdet.

Bruk komponenten varsomt. Brukere kan forveksle varsler med reklame, og dermed overse dem. Hvis vi bruker varsler for ofte, kan vi forverre dette problemet.

Pass på at Alert har samme utseende og formspråk i alle tjenester og produkter. Denne komponenten skal være mulig å kjenne igjen overalt, så vi skal unngå å justere den.

Tekst

Det er ikke alltid lett å forstå forskjellen på varslene, selv om de har ulike ikoner og farger. Derfor er det viktig at teksten vi skriver i varselet er tydelig og lett å forstå.

Hvis det er noe brukerne må eller kan gjøre for å komme videre med oppgaven sin, skal teksten formidle dette. Når meldingen er lengre enn en setning, kan det være lurt å ha med en overskrift som fremhever det viktigste.

Her er en liste med hvilken type informasjon varsel bør inneholde:

• Fortell hva som har skjedd
  • Eksempel: "Kunne ikke koble til konto."
• Fortell hvorfor det skjedde
  • Eksempel: "Vi kunne ikke koble til kontoen din på grunn av tekniske problemer fra vår side."
• Forsikre brukeren
  • Eksempel: "Endringene dine har blitt lagret."
• Gi dem en vei ut av problemet
  • Eksempel: "Hvis dette problemet oppstår igjen, kontakt kundeservice."
• Hjelp dem å fikse problemet selv
  • Eksempel: "Vennligst prøv igjen."

For mer veiledning om hvordan du skriver tydelig og effektiv tekst i varsler, se språkanbefalingene i mønsteret for Systemvarsler.