Your bookmarks

Alert

Breaks the main user flow to present information.

Use alerts when you want to interrupt a user’s journey with relevant information. The information will appear in context to make it clear what it’s about.

Alerts are useful for things like status messages and additional explanations. Because they interrupt the main flow, be careful not to use too many and overwhelm the user. Use the various types to ensure users understand the importance of the message.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
Waiting
Android (Kotlin)
Waiting
Sketch
Released

Content structure

Icon: supports the message; title: works best with 5 to 8 words (in English); description: provides more context for the message, usually when the message is long.

Guidelines

Explain the alert

Explain why the user was interrupted — confirm the action that will happen or describe what just has happened.

Keep it clear, short, and simple. Alerts break the user flow, so you want to explain why with as few details as possible.

For longer messages, use a title for quick info. The user sees the title first when scanning the message. You can also provide additional context for the alert by adding a description. For more complex messages, let users access more information through an action button.

  # Provide context for your messages.

Title: Airline refunds apply. Message: This ticket is covered by airline refund policies. If the airline denies your application, your economy tickets will receive little or no refund.
Message:   If the airline denies your application, your economy tickets will receive little or no refund.

Use more than just color

To maximize the accessibility of alerts, use icons to support the message. Colors alone will not always distinguish different alert types.

  # Use icons

Without icons, people with color blindness might see success and critical alerts as the same.

Success and critical alerts with icons are clear even without color.
Success and critical alerts without icons are not clear without color.

Follow up with actions

There are times when just simple information isn’t enough and the user needs to take additional steps to resolve the problem or get additional details.

In such cases, provide additional actions for your message. Alerts use status buttons to match the button color with the alert color.

Alert types

There are four types of alerts — informational, success, warning, and critical

Informational alert

Informational alerts are the most common alerts. Use them to guide a user’s attention to relevant details, but keep it focused and related to the topic on the screen.

Consider tailoring your icons to your message. Baggage, clocks, or other symbols will strengthen the informative nature of your message.

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="Re-check your credentials"
>
  <Stack spacing="compact">
    <Text>To avoid boarding complications, your entire name must be 
    entered <strong>exactly as it appears in your passport/ID</strong>.
    </Text>
    <Button type="info" size="small">
      More info
    </Button>
  </Stack>
</Alert>

Success alert

Success alerts confirm that an instruction from the user, such as to make a payment or request a refund, was processed successfully. Usually used without an action button.

Avoid using success alerts when there is a follow-up action, such as when users need to confirm something by e-mail. For such actions, use an informational alert instead.

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"
/>

Warning alert

Use warning alerts when you need to inform users about a potentially unfavorable situation in their trip that requires eventual action from them. If the issue requires immediate attention, use a critical alert.

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="Visa requirements check"
  type="warning"
>
  <Stack spacing="compact">
    <Text>The 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 the visa requirements 
    for:</Heading>
    <List>
      <ListItem icon={<CountryFlag code="pl" name="Poland" 
      />}>Poland</ListItem>
    </List>
    <Button type="warning" bordered size="small">
      Check visa requirements
    </Button>
  </Stack>
</Alert>

Critical alert

Use critical alerts when something is blocking users from continuing or an issue needs to be resolved immediately. The alert should offer a solution to the problem.

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="No results loaded"
  type="critical"
>
  <Stack spacing="compact">
    <Text>There was an error while processing your request. Refresh the 
    page to load the 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.

Look & feel

Mobile vs. desktop

The alert component’s content should be the same on all platforms, but there’s more space to play with on the desktop. That’s why the desktop versions have larger fonts, icons, and inner paddings.

For native or responsive views, the design is much more compact to avoid filling the screen with the message.

On mobile platforms, everything is more compact.
On desktop platforms, things can breathe.

Cascading visual hierarchy

Alert components have a visual hierarchy where the title is the most significant element. The title’s darker color emphasizes it against the description. It’s a minor adjustment that doesn’t stand out to the user.

In React, we also force the colors of child components to match the alert type. You can freely use Text, Heading, List, and TextLink components, and the colors of these components will be automatically adjusted.

Related components

Heading + Text

Alerts, especially informational alerts, call for the user’s attention. They become even more stressing when there are multiple alerts on the screen. Typical Text and Heading components might be enough to get your message across while keeping the screen calm.

EmptyState

Generally, use an EmptyState component when there are no results that match the user’s query. But if there was a technical error, use a critical alert instead.

Modal

If there is an issue that is important for users to solve as soon as possible, consider opening a modal to focus their entire attention on the issue.