Skip to content
Vy logo
Components

Alert

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

Examples

A simple alert

<Alert variant="important">
There is work on the Oslo - Drammen line, which may mean there is extra things to look at if you have a window seat.
</Alert>

A closable Alert with a title and custom icon. Use size 24px icons.
Icons from the icon prop will automatically be given the alerts icon color. 

<Alert variant="info" title="Arbeid med utsikt" icon={NotificationFill24Icon} closable>
There is work on the Oslo - Drammen line, which may mean there is extra things to look at if you have a window seat.
</Alert>

Alert have several different variants with different use cases. 

<SimpleGrid gap="2" columns={{ base: 1, xl: 2 }}>
  {[
    {variant: "important", description: "Warns the user about something important"},
    {variant: "alt", description: ""},
    {variant: "error", description: "Critical information about something that may hinder the user to go futher."},
    {variant: "success", description: "Confirmative message that a task has successfully been done."},
    {variant: "info", description: "Useful information that should not be crucial for the user"},
    {variant: "neutral", description: "Neutral information"},
    {variant: "error-secondary", description: "error-secondary"},
    {variant: "service", description: "service"},
  ].map((v) => (
    <Alert variant={v.variant} title={`${v.variant} alert`} closable>
      {v.description}
    </Alert>
  ))}
</SimpleGrid>;

Expandable alert

<ExpandableAlert variant="success" title="Billett i boks">
    <Stack>
      <Text>The summer is here, and we hope you have are looking forward to it as much as us. .</Text>
      <Text>We are really excited!</Text>
    </Stack>
</ExpandableAlert>

Expandable variants

<Flex gap="2" direction="column">
  {[
    {variant: "important", description: "Warns the user about something important"},
    {variant: "alt", description: ""},
    {variant: "error", description: "Critical information about something that may hinder the user to go futher."},
    {variant: "success", description: "Confirmative message that a task has successfully been done."},
    {variant: "info", description: "Useful information that should not be crucial for the user"},
  ].map((v) => (
    <ExpandableAlert variant={v.variant} title={`${v.variant} alert`} closable>
      {v.description}
    </ExpandableAlert>
  ))}
</Flex>;

ServiceAlerts should be used when there are technical issues or planned maintenance that may affect the usability or functionalities on the platform. 

<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 with global-deviation as variant should be used to communicate traffic announcements. These will have aria-label “Traffic announcement“, while the default variant (“service“) will have aria-label “Service message“. 

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

It is possible to customise the Alert to contain other components.

<Alert variant="important" css={{
                '& [data-part="content"]': {
                    width:"100%",
                }
            }}>
  <Flex justifyContent="space-between" width="100%">
    <Stack direction="row"> 
      <Text fontWeight="bold">Viktig info</Text> 
      <Text>Det mangler informasjon i noen av feltene</Text> 
    </Stack>
    <Stack direction="row" gap="1">
      <Button size="xs" variant="secondary">Skjul</Button>
      <Button size="xs">Fullfør</Button>
    </Stack>
  </Flex>
</Alert>