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:
Table below contains all types of the props available in Alert component.
||The content of the Alert.|
||Optional prop for testing purposes.|
||The displayed icon. See Functional specs|
||Function for handling Alert onClose.|
||The title of the Alert.|
||The type of Alert.|
By passing the
closableprop into Alert, you will be able to handle
onClosefunction 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
true, Alert will have it's own icon, based on selected
type. If you want to use different icon, just pass it to the
React.Element. Alert without
iconprop 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.