Skip to content
Vy logo
Components
React

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.
</ClosableAlert>

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.
</ClosableAlert>

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>
</ExpandableAlert>

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>

ServiceAlert, with two notifications (service)

<ServiceAlert title="Error with Vipps" notification={2} contentWidth="container.md">
 <Text>First. Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
 <Text>Second. Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
</ServiceAlert>

ServiceAlert (global-deviation)

<ServiceAlert title="Error with Vipps" notification={2} variant="global-deviation" contentWidth="container.md">
  <Text>First. Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
</ServiceAlert>