Alertbox

GitHub Figma

Om komponenten

Alertbox brukes for å vise en statusbeskjed som det er viktig for brukeren å få med seg. Alertbox kan enten brukes globalt på hele nettstedet, eller kun på en spesifikk side/løsning.

Statusbeskjeder bør være korte og konkrete, og skrives slik at det er enkelt for brukeren å forstå hvordan beskjeden påvirker dem.

Egnet til:

  • Å informere om en viktig hendelse, endring eller en konsekvens av en handling

Uegnet til:

  • Store mengder informasjon
  • Beskjeder som ikke har noen betydning for brukeren
Divider

Varianter

Informasjon - Information

Brukes for å gi brukeren informasjon relevant til den siden eller handlingen de skal utføre. For eksempel at brukeren trenger å ha fødselsnummer klart før de fyller ut skjemaet.

<Alertbox
  role="none"
  variant="info"
>
  <Heading level={4}>
    Ha fødselsnummeret ditt klart
  </Heading>
  <Content>
    <p>
      For å sende inn skjemaet trenger vi fødselsnummeret ditt. Dette vil kun bli brukt for innsendingen av skjemaet, og lagres ikke hos oss i OBOS. 
    </p>
  </Content>
  <Footer>
    <p>
      Sist oppdatert: {' '}
      <time dateTime="2024-01-20">
         20. februar kl. 13.37
      </time>
    </p>
  </Footer>
</Alertbox>

<Alertbox
  role="none"
  variant="info"
>
  <Content>
    Bruk dette tekstfeltet til å skrive en kort varsling
  </Content>
</Alertbox>

Suksess - Success

Brukes til å gi brukeren en beskjed om at noe er fullført eller at noe er lagret. For eksempel “Søknaden din er sendt inn”

<Alertbox
  role="none"
  variant="success"
>
  <Heading level={4}>
    Suksess!
  </Heading>
  <Content>
    <p>
      Søknaden din er sendt inn. Vi tar kontakt så fort vi kan. 
    </p>
  </Content>
  <Footer>
    <p>
      Sist oppdatert: {' '}
      <time dateTime="2024-01-20">
         20. februar kl. 13.37
      </time>
    </p>
  </Footer>
</Alertbox>

Varsel - Warning

Brukes for å gi brukeren en advarsel om en feil i en tjeneste eller på siden.

<Alertbox
  role="status"
  variant="warning"
>
  <Heading level={4}>
    Problemer med å melde forkjøp
  </Heading>
  <Content>
    Akkurat nå er det mange som opplever problemer med å melde forkjøp
  </Content>
</Alertbox>

Kritisk feil - Error

Brukes for å gi brukeren informasjon om at noe gikk galt, ikke fungerer, eller en handling som mislyktes. For eksempel "Skjema ble ikke sendt inn."

<Alertbox
  role="alert"
  variant="danger"
>
  <Heading level={4}>
    Noe gikk galt!
  </Heading>
  <Content>
    Endringene ble ikke lagret, prøv igjen eller kontakt kundeservice hvis problemet vedvarer.
  </Content>
</Alertbox>

Alertbox som kan lukkes

<Alertbox
  isDismissable
  role="alert"
  variant="danger"
>
  <Heading level={3}>
    Noe gikk galt!
  </Heading>
  <Content>
    <p>
      Endringene ble ikke lagret, prøv igjen eller kontakt kundeservice hvis problemet vedvarer. Du kan lukke dette varselet. 
    </p>
  </Content>
  <Footer>
    <p>
      Sist oppdatert: {' '}
      <time dateTime="2024-01-20">
         20. februar kl. 13.37
      </time>
    </p>
  </Footer>
</Alertbox>
Divider

Retningslinjer

Kun på hvit bakgrunn

Ikke bruk Alertbox på andre bakgrunnsfarger enn hvit.

Feilaktig bruk av alertbox hvor det vises på en annen farge enn hvit.

Divider

Formatering

Anatomi

Alertbox-komponentens anatomi med label, ikon, lukkeknapp, beskrivelse og dato oppdatert

  1. Label Kort og informativ tittel som raskt forklarer hva innholdet i typen alertbox handler om.
  2. Ikon Ikonet avhenger av hvilken variant du bruker. For suksessvarianten er det mulig å endre ikonet.
  3. Beskrivelse En kort og informativ beskrivelse av hva som skal gjøres/er feil. Det er også mulig å skjule beskrivelse, om den er kun ment som støtteinformasjon.
  4. Dato oppdatert Fint å bruke på Error og Warning, for å fortelle om når OBOS ble oppmerksomme på feilen og gir et bilde av status i saken.

Props

Alertbox

PropDescriptionDefault
variant?The variant of the alertinfo
roleThe ARIA role for the alertbox.-
className?Additional CSS className for the element.-
icon?Overrides the default icon for the alertbox variant. Should be used sparingly as the default icons are visually connected to the color of the variant.-
isExpandable?Controls if the alert is expandable or notfalse
isDismissable?Controls if the alert can be dismissed with a close button.false
isDismissed?Controls if the alert is rendered or not. This is used to control the open/closed state of the component; make the component "controlled".false
onDismiss?Callback that should be triggered when a dismissable alert is closed. This is used to control the open/closed state of the component; make the component "controlled".-