Your bookmarks

Alert

Alert messages intend to break the flow of the user. They aim to raise awareness about key decisions that users have to make.

Component status

Sketch
Released
Figma
Planned
React
Released
React Native
Planned

Content structure

Alert structure – explanation of all elements.

General 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 a 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.

Alert message types

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

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.

import Alert from "@kiwicom/orbit-components/lib/Alert";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Button from "@kiwicom/orbit-components/lib/Button";
import Text from "@kiwicom/orbit-components/lib/Text";
import InformationCircle from "@kiwicom/orbit-components/lib/icons/InformationCircle";
<Alert
  icon={<InformationCircle />}
  title="Check again your credentials"
>
  <Stack spacing="compact">
    <Text>To avoid boarding complications, all given names and surnames must be entered <strong>exactly as they appear in your passport/ID</strong>.</Text>
    <Button type="info" size="small">
      More info
    </Button>
  </Stack>
</Alert>

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.

import Alert from "@kiwicom/orbit-components/lib/Alert";
import Check from "@kiwicom/orbit-components/lib/icons/Check";
<Alert
  icon={<Check />}
  title="Your payment was successful."
  type="success"
/>

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.

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.

import Alert from "@kiwicom/orbit-components/lib/Alert";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Button from "@kiwicom/orbit-components/lib/Button";
import Text from "@kiwicom/orbit-components/lib/Text";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import Visa from "@kiwicom/orbit-components/lib/icons/Visa";
import CountryFlag from "@kiwicom/orbit-components/lib/icons/CountryFlag";
<Alert
  icon={<Visa />}
  title="A visa or airport transit visa may be necessary for travel"
  type="warning"
>
  <Stack spacing="compact">
    <Text>Requirements found here are for reference purposes only. Contact the embassy or your foreign ministry for more information.</Text>
    <Heading type="title4">Make sure you know your visa requirements for these countries:</Heading>
    <List>
      <ListItem icon={<CountryFlag code="pl" name="Poland" />}>Poland</ListItem>
    </List>
    <Button type="warning" size="small">
      Check Visa Requirements
    </Button>
  </Stack>
</Alert>

Critical alert

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

import Alert from "@kiwicom/orbit-components/lib/Alert";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Button from "@kiwicom/orbit-components/lib/Button";
import Text from "@kiwicom/orbit-components/lib/Text";
import AlertCircle from "@kiwicom/orbit-components/lib/icons/AlertCircle";
import Reload from "@kiwicom/orbit-components/lib/icons/Reload";
<Alert
  icon={<AlertCircle />}
  title="Sorry, results couldn't be loaded"
  type="critical"
>
  <Stack spacing="compact">
    <Text>There was an error while processing your request. Refresh your page for loading results.</Text>
    <Stack flex spacing="compact">
      <Button iconLeft={<Reload />} type="critical" size="small">
        Refresh page
      </Button>
      <Button type="critical" bordered size="small">
        Contact support
      </Button>
    </Stack>
  </Stack>
</Alert>

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.