Components

Alert

Alerts – also known as info messages – communicate information of varying degrees of importance, and are arranged in a clear color hierarchy.

Examples

Static alert

<StaticAlert variant="info">
  Det er arbeid på strekningen Oslo - Drammen, som kan føre til ekstra mye å se på om man har vindusplass.
</StaticAlert>

Static alert with title

<StaticAlert variant="info" title="Arbeid med utsikt">
  Det er arbeid på strekningen Oslo - Drammen, som kan føre til ekstra mye å se på om man har vindusplass.
</StaticAlert>

Closable alert

<ClosableAlert variant="warning">
  Du er med i en betatest. Det betyr at du kan oppleve noe flere bugs enn vanlig.
</StaticAlert>

Closable alert with title

<ClosableAlert variant="warning" title="Se opp for bugs">
  Du er med i en betatest. Det betyr at du kan oppleve noe flere bugs enn vanlig.
</StaticAlert>

Expandable alert

<ExpandableAlert variant="success" title="Billett i boks">
  <Stack>
    <Text>Da er sommerens ferie på plass. Vi håper du gleder deg like mye som vi gjør.</Text>
    <Text>Og vi gleder oss masse!</Text>
  </Stack>
</StaticAlert>

Boxes of the different versions

<Stack>
  <StaticAlert variant="success">
    En suksessmelding fungerer som en bekreftelse på at du gjorde noe positivt. Godt jobba!
  </StaticAlert>
  <StaticAlert variant="info">
    En infomelding forteller deg nøytral informasjon, som hvor holdeplassen er.
  </StaticAlert>
  <StaticAlert variant="warning">
    En advarselsmelding skal si ifra om ting det er viktig at du får med degg, som en forsinkelse eller endring av spor.
  </StaticAlert>
  <StaticAlert variant="error">
    En feilmelding informerer om at noe kritisk har skjedd, som en innstilling, eller at noe du prøvde på feilet.
  </StaticAlert>
  <StaticAlert variant="alt-transport">
    En alternativ transport-melding sier ifra når det er buss for tog (eller, en sjelden gang, tog for buss).
  </StaticAlert>
</Stack>