Alert
Alerts – also known as info messages – communicate information of varying degrees of importance, and are arranged in a clear color hierarchy.
Code examples
<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>
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" | |
children | React.ReactNode | The content of the alert | |
title | string | Add a title to the alert. | |
closable | boolean | Wether or not the Alert should be closable. Default false | |
indicator | boolean | Wether or not to show an icon on the left side. Default true | |
onClose | function | Callback for closing the alert | |
showIndicator | boolean | defaults to true | |
icon | IconComponent | Replaces 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" | |
title | string | The text to show before the alert is expanded | |
children | React.ReactNode | The content to show when the alert is expanded | |
defaultOpen | boolean | Whether 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) => void | The callback fired when the focused accordion item changes. | |
onValueChange | (details: ValueChangeDetails) => void | The 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 |
|---|---|---|---|
title | string | The text to show before the alert is expanded | |
notification | number | The number of service messages shown in the alert | |
children | React.ReactNode | The content to show when the alert is expanded | |
defaultOpen | boolean | By default the accordion is not expanded (false). | |
headingLevel | "h2" | "h3" | "h4" | "h5" | "h6"; | The html element rendered for the title element. Default is "h3" | |
contentWidth | string | By default the prop is "container.md" | |
variant | string | "service" | "global-deviation" - defaults to "service" | |
onValueChange | (details: ValueChangeDetails) => void | The callback fired when the state of expanded/collapsed accordion items changes. | |
onFocusChange | (details: FocusChangeDetails) => void | The callback fired when the focused accordion item changes. |