Alert message

The main purpose of alert messages is to communicateĀ important information to our users.

To implement Alert component into your project you'll need to add the import:

import Alert from "@kiwicom/orbit-components/lib/Alert";

After adding import into your project you can use it simply like:

<Alert>Hello World!</Alert>

Props

Table below contains all types of the props available in Alert component.

Name Type Default Description
children React.Node The content of the Alert.
closable boolean false If true, the Close icon will be displayed. See Functional specs
dataTest string Optional prop for testing purposes.
icon React.Element<any> \| boolean The displayed icon. See Functional specs
onClose func Function for handling Alert onClose.
spaceAfter enum Additional margin-bottom after component. See this docs
title string | React.Node The title of the Alert.
type enum "info" The type of Alert.

enum

type
"info"
"success"
"warning"
"critical"

Functional specs

  • By passing the closable prop into Alert, you will be able to handle onClose function and Close icon will be displayed. Also, if you want to select the Close Button element for testing purposes, use [data-test="AlertCloseButton"] selector.

  • If you set up icon props as true, Alert will have it's own icon, based on selected type. If you want to use different icon, just pass it to the icon prop as React.Element. Alert without icon prop doesn't have any icon.

1. General alert message guidelines

  • Try not to use more than one alert message at once. They are designed to grab users attention and if you use more than one at once, it can be confusing what’s important.
  • The icon should be displayed most of the time, so we don’t depend only on the color of the message.
  • When you need to use longer message, it’s recommended to use a title as well. Users tend to ignore longer texts, the title should contain a summary of the message.
  • The information inside of alert message should be brief. If there is the need to explain something in more detail, it’s recommended to use the action button and show content gradually.
  • Never use alert messages for promotion purposes. They are part of the interface that usually reacts on users action or requires users attention.

2. Alert message types

We have four types of alert messages. Everyone has a specific place to use. For more information, check guidelines below.

2.1 Informational alert

Use when you need to inform users about something that isĀ happening in their booking orĀ a trip. If the issue is potentially dangerous, consider using warning alert. Keep in mind that warning alert can stress users more than the informational one.

It’s totally ok to use a different icon for your informational message, for example, baggageĀ or clock.

2.2 Success alert

Use when a user just performed some action and weĀ need to tell them that action was successful. This button is usually used without an action button.

Avoid using success banner if there is any follow-up action, for example, in cases where we need to confirm something to users by e-mail later. It’s recommended to use informational alert instead.

2.3 Warning alert

Use in cases when you need to inform users about a potentially dangerous situation in their trip and it requires some action from them. However, if the issue requires immediate attention, use critical alert instead.

2.4 Critical alert

Use when something is blocking users from continuing or when some issue needs to be resolved immediately.

A critical alert should provide some form of solution for their problem. If something is important for users to solve as soon as possible, automatic open of a modal window is worthy of considering.