Callout

Provide important and persistent contextual information.

Cover

Maturity

Pre-Alpha

FYQ2 target

Beta

Figma component

-

Repository

-

Storybook

-

Overview

A Callout is a communication component that uses Secondary Emphasis and semantic sentiments to highlight important details and provide context for a flow.

What sets Callout apart from other communication components are two key factors:

  1. They are synchronous: They load with the rest of the page content to provide context before taking action. There are other options for giving reactive feedback, such as Error Text—for Form Controls—, Confirmation, or Notification.
  2. They cannot be dismissed: The message remains until the underlying situation is resolved. If the message is disposable, you shouldn’t use a Callout.

Types

Name

When to use

General

The information is relevant to the entire page.

Specific

The information is related to a particular page element.,

Anatomy

Callout anatomy

Callout anatomy

1. Icon (sentiment signifier)
2. Heading (Optional in General Callout only)
3. Description
4. Link (Optional)

The Callouts are composed of an icon, a short description, and an optional link. They purposely lack properties like headings or actions that can distract people from their primary tasks.

Properties

Name

Values

Default

Type

General | Specific

General

Sentiment
Provides semantic meaning

Warning | Success | Critical | Featured

Critical

Heading (General only)
Provides optional additional context

Boolean

False

How to use

Type

General

General cover - Do

General Callouts are relevant to an entire page or an entire landmark. We should position them right below the page, landmark, or region header—to ensure people read them first so they can better understand the context.

Specific

In this case, the Specific Callout alerts the user about the potential consequences of performing an action. If people activate the 'Use a live prototype' feature once the maze is live, it can prevent tests from completing the mission.

In this case, the Specific Callout alerts the user about the potential consequences of performing an action. If people activate the 'Use a live prototype' feature once the maze is live, it can prevent tests from completing the mission.

Specific Callouts are related to a particular page element and should be positioned immediately below to associate them more effectively.

⛔️ Avoid using Callouts as Form Control errors

⛔️ Avoid using Callouts as Form Control errors

Callouts do not emerge when the error occurs, as they are loaded with the rest of the content. Additionally, we're missing an excellent opportunity to prevent the error before it happens.

✅ Leverage Helper Text and Error Text

✅ Leverage Helper Text and Error Text

A good Helper Text—available in all Form Fields—can prevent errors by providing context before people interact with the Control. Error Text provides reactive, in-context feedback with instructions to solve the problem.

⛔️ Avoid using actions inside a Callout

⛔️ Avoid using actions inside a Callout

Actions must take place within the surrounding UI context rather than inside the Callout. The UI should be functional even without the Callout, as its sole purpose is to enhance the context.

✅ Explore alternative resources and steps

✅ Explore alternative resources and steps

Consider reevaluating the flow and identifying areas where alternative components could better fulfill the required purpose.

Sentiment

Semantic colors are intended to draw attention to essential experience elements and, through specific sentiments, assign them a particular meaning that facilitates their differentiation.

Further reading


#fff6f8
Critical
A critical or unexpected situation
When to use
  1. Something’s not working and requires immediate action because of its importance and severity; regardless if it’s a person’s error or a system error.
  2. A problem happened, or a person made a mistake that prevented them from finishing their task or a process.
  3. Indicate actions that are destructive and can’t be undone—they require confirmation.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
  1. "We’ve got a problem, and we need to act now."
#fff7f1
Warning
Cautionary advice about a potential problem
When to use
Informs about/indicates an action that can be taken to prevent errors or unwanted things from happening.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
  1. "We’re letting you know about a potential problem."
  2. "Unverified"
#ebfcfa
Success
Achievement of a goal
When to use
When things are done or went accordingly to plan.
Purpose
Inform about success.
Example
  1. "This is done; everything went well."
  2. "Enabled"
#f9f7ff
Featured
Highlighted for special attention, neither good nor bad
When to use
Provides valuable information to people about something important or out of the ordinary, essential to understand the context and making a decision.
Purpose
Neutrally inform people.
Example
  1. "We’re letting you know about…"
  2. "New"
  3. "Beta"
  4. "AI"

Examples

Warning

Warning

In this example, we are informing the user that performing an action like "Changing to live prototype" can have unexpected results for users.

Critical

Critical

Due to the lack of a website connection, the feature will not be functioning so action is required. In this scenario, users are not able to progress effectively.

Success

Success

A success message informs the user about the success of a task.

Featured

Featured

In this example, we are letting the user know about important but neutral information in the context user needs to know. In this case, we are informing users that there is a new projects display.

Heading

In this example, it was necessary to develop the reason for the warning a bit further, so the message was split in two: Heading and Description.

In this example, it was necessary to develop the reason for the warning a bit further, so the message was split in two: Heading and Description.

Headings should be added when there is a lot of information to make it easier for people to scan. But we must use them sparingly to avoid diverting the focus of the task.

Writing guidelines:

  1. Write Headings in sentence case (only the first word and proper nouns are capitalized)
  2. Do not end with a period.

Description

In a Warning Callout, the Description should clearly indicate the necessary steps people need to take to prevent an error or problem.

In a Warning Callout, the Description should clearly indicate the necessary steps people need to take to prevent an error or problem.

Clear and concise descriptions help people understand the context and complete their tasks. Including too much information or links can be distracting and hinder their ability to do so.

Writing guidelines:

  1. If there‘s a Heading, we must avoid repeating the same information.
  2. It must go with a period at the end, except if it works as a Heading occupying only one line.

Best practices

To ensure effective communication, we must follow a consistent structure and order when writing our messages. They should include the following:

  1. Main message: Clearly states the reason for displaying the Callout.
  2. Additional info: Provides further details and suggests potential solutions for the main message, whether Warning or Critical.
Warning

Warning

1. Clear warning message/explain the situation
2. How to prevent a potential problem

Critical

Critical

1. Explain what is going on/what happened
2. How to solve the blocker

Featured

Featured

1. Explain what needs attention
2. Add extra details for context

Success

Success

1. Clearly state what was achieved.
2.

Related content

Link text

Sometimes, people must go elsewhere to help solve an issue, learn more about a process they may struggle with, or improve their experience. You can add them as part of the Description.

Writing guidelines:

  1. They should be four words or less to avoid wrapping.
  2. They must be descriptive and meaningfully indicate the link’s destination.
  3. They don’t necessarily have to be at the end of the sentence—they can also be part of it.

Related content

Sizing and spacing

We use standard sizing and spacing to improve the experience depending on the information density and make our interface more accessible, predictable, and easy to use.

Further reading

Full-width

FullWidth - vertical

Callouts are designed to adjust its width to fit within its parent container while accounting for any padding. Once they reach the maximum width allowed by the container, the text will automatically wrap to the next line, causing the height of the container to increase as needed.

Min-width

min width

Callout are set to have a minimum width of 180px. Less than that, the information is hard to read and overall the interface might suffer.

Behavior

Frequency

Only one Callout of each type may be shown at a time. When multiple Callouts of the same variant are necessary, and the messages aren‘t related, they should appear one at a time, based on importance. Avoid stacking Banners on top of one another.

Lists

If the callout uses a list, it should always have a heading that gives context as to what that list is about.

Lists should only be used where there are multiple mistakes or warnings that should be mentioned at the same time.

Lists should only be used where there are multiple mistakes or warnings that should be mentioned at the same time.