Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Alert

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

FigmaGitHub

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>

Guidelines

Alerts should be used when there is important information to display. They are available in different variants that should be used in different ways depending on the severity of the message.

Different Alert types: simple alert and service alert

Simple Alert
Simple alerts should be used when the information is relevant to the current page/place the user is at. For example, if there is useful information that should be given in a travel suggestion, you can use an info Alert.

Service Alert
Service alerts should be used when the information is relevant regardless of where in the application the user is. For example, if there are planned maintenance that may affect the usability of platform

Accessibility

Role
All alerts are by default set to have role=”alert”, meaning they are read up immediately by voiceover. In cases where this is not well suited, for example when the alert does not carry any critical messages, please override the role by sending role=”status” or role={undefined}.

Live-region
Note that an Alert with role=”alert” (default role) should not be combined with aria-live. When something has role=”alert” it is equivalent to using aria-live=”assertive”.

However, Alerts with role=”status” should be combined with aria-live=”polite” to maximise the compatibility. See documentation here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions#roles_with_implicit_live_region_attributesEkstern lenke .

Code

<Alert />

import { Alert } from "@vygruppen/spor-react";

An Alert. Extends BoxProps

Props

Name
Type
Required?
Description
variant"important" | "alt" | "error" | "success" | "info" | "neutral" | "error-secondary" | "service"Default "info"
childrenReact.ReactNodeThe content of the alert
titlestringAdd a title to the alert.
closablebooleanWether or not the Alert should be closable. Default false
indicatorbooleanWether or not to show an icon on the left side. Default true
onClosefunctionCallback for closing the alert
showIndicatorbooleandefaults to true
iconIconComponentReplaces the icon of the Alert. use 24px sized icons.

<ExpandableAlert />

import { ExpandableAlert } from "@vygruppen/spor-react";

Expandable alert, which lets you disclose more information once expanded

Props

Name
Type
Required?
Description
variant"success" | "info" | "important" | "error" | "alt" Default "info"
titlestringThe text to show before the alert is expanded
childrenReact.ReactNodeThe content to show when the alert is expanded
defaultOpenbooleanWhether or not the alert is expanded by default (if not controlled)
headingLevel"h2" | "h3" | "h4" | "h5" | "h6";The html element rendered for the title element
onFocusChange(details: FocusChangeDetails) => voidThe callback fired when the focused accordion item changes.
onValueChange(details: ValueChangeDetails) => voidThe callback fired when the state of expanded/collapsed accordion items changes.

<ServiceAlert />

import { ServiceAlert } from "@vygruppen/spor-react";

Expandable alert used to show multiple service messages. Lets you disclose more information once expanded

Props

Name
Type
Required?
Description
titlestringThe text to show before the alert is expanded
notificationnumberThe number of service messages shown in the alert
childrenReact.ReactNodeThe content to show when the alert is expanded
defaultOpenbooleanBy default the accordion is not expanded (false).
headingLevel"h2" | "h3" | "h4" | "h5" | "h6";The html element rendered for the title element. Default is "h3"
contentWidthstringBy default the prop is "container.md"
variantstring"service" | "global-deviation" - defaults to "service"
onValueChange(details: ValueChangeDetails) => voidThe callback fired when the state of expanded/collapsed accordion items changes.
onFocusChange(details: FocusChangeDetails) => voidThe callback fired when the focused accordion item changes.