Grunnmuren - OBOS' Design System

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

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>

Formatering

Anatomi

Label Kort og informativ tittel som raskt forklarer hva innholdet i typen alertbox handler om.
Ikon Ikonet avhenger av hvilken variant du bruker. For suksessvarianten er det mulig å endre ikonet.
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.
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.

Prop	Description	Default
`variant?`	The variant of the alert	info
`role`	The 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 not	false
`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".	-

Alertbox

Innhold