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)
n/a
Android (Kotlin)
n/a
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 special status buttons to match the button color with the alert color.

import AlertButton from "@kiwicom/orbit-components/lib/Alert/AlertButton";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Heading from "@kiwicom/orbit-components/lib/Heading";
() => (
  <Stack direction="column">
    <Stack direction="row" align="end" spaceAfter="medium">
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Success</Heading>
        <AlertButton type="success">Success</AlertButton>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Info</Heading>
        <AlertButton type="info">Info</AlertButton>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Warning</Heading>
        <AlertButton type="warning">Warning</AlertButton>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Critical</Heading>
        <AlertButton type="critical">Critical</AlertButton>
      </Stack>
    </Stack>
    <Stack direction="row" align="end">
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Success Subtle</Heading>
        <AlertButton type="successSubtle">Success</AlertButton>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Info Subtle</Heading>
        <AlertButton type="infoSubtle">Info</AlertButton>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Warning Subtle</Heading>
        <AlertButton type="warningSubtle">Warning</AlertButton>
      </Stack>
      <Stack shrink direction="column" spacing="condensed">
        <Heading type="title5">Type: Critical Subtle</Heading>
        <AlertButton type="criticalSubtle">Critical</AlertButton>
      </Stack>
    </Stack>
  </Stack>
)

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 AlertButton from "@kiwicom/orbit-components/lib/Alert/AlertButton";
import Stack from "@kiwicom/orbit-components/lib/Stack";
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>
      <AlertButton type="info">More info</AlertButton>
    </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 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 AlertButton from "@kiwicom/orbit-components/lib/Alert/AlertButton";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
import Heading from "@kiwicom/orbit-components/lib/Heading";
import CountryFlag from "@kiwicom/orbit-components/lib/CountryFlag";
import List from "@kiwicom/orbit-components/lib/List";
import ListItem from "@kiwicom/orbit-components/lib/List/ListItem";
import Visa from "@kiwicom/orbit-components/lib/icons/Visa";
() => (
  <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>
      <AlertButton type="warning">Check visa requirements</AlertButton>
    </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 AlertButton from "@kiwicom/orbit-components/lib/Alert/AlertButton";
import Stack from "@kiwicom/orbit-components/lib/Stack";
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">
        <AlertButton iconLeft={<Reload />} type="critical">
          Refresh page
        </AlertButton>
        <AlertButton type="criticalSubtle">Contact support</AlertButton>
      </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, it’s worth considering automatically opening a modal window.

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.