Callout

Callout presents timely, contextual, and nondisruptive feedback displayed in response to a user action or system activity.

Note: This component was previously called infobox.

Overview

Callout is one of three types of notifications available in Odyssey. It applies to a specific area in the UI and persists until dismissed by the user or the notification is resolved.

Anatomy

inline-anatomy
  1. Title (optional): Summarizes the key actionable information of the callout.
  2. Icon: Represents the severity of the notification and is supported by semantic background color.
  3. Description: Provides additional information and context.
  4. Action (optional): Lets the user address the issue or navigate to a dialog or page.

Demo

Storybook failed to load. Please connect to the VPN to access.

Open the component in Figma.

When to use

Callouts should be used for these scenarios:

  • Use when you need an alert to remain until an issue is fixed.
  • Use when you need the alert to be in context of a specific area.

When not to use

Use another type of notification for scenarios when you need the information displayed for a different amount of time, or in a different location, or based on a user’s action.

Use an toast instead:

  • For transient feedback based on user action.
  • For non-critical actions.
  • To immediately confirm a user’s action.

Use a banner instead:

  • For system-wide messages.

Similar components

Properties

Placement

Callouts should be placed as close as possible to the item that needs attention. This could be at the page level or within a section of the page.

Avoid overusing callouts in the same section. Multiple notifications could overwhelm and confuse the user.

Size

The callout is fluid and will stretch to fit the width of the parent container.

Layout

If including an action, the link can remain left aligned. This is an exception to right-aligning actions. See button

Dismissal

The callout disappears when an issue has been fixed or the message no longer applies.

Severity

The callout color and icon change depending on the severity of the message.

null

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the ARIA guidelines for callout.

Content guidelines

 

Title (optional)

  • Summarize the key actionable information of the alert.
  • Use simple, clear words that match the severity of the callout status.
  • Be concise. Aim for three to seven words.
  • Don’t use end punctuation, including periods, commas, or semicolons.
  • Write in sentence case (capitalize the first word and proper nouns only).

 

Description

  • Start with the key actionable information.
  • Include relevant information.
  • Use simple, clear words that match the severity of the callout status.
  • Explain how to resolve the issue, particularly for warning and error callouts.
  • Start sentences with verbs when explaining what actions are available.
  • Use full sentences.
  • Use appropriate punctuation, including periods, commas, or semicolons.
    • If including a list, don’t use end punctuation for list items.
  • Write in sentence case (capitalize the first word and proper nouns only).
  • Recommended maximum text is one paragraph.
    • A paragraph should be a maximum of three sentences. Each sentence should be a maximum of 15 words.
  • If including a list, order list items in a logical, intentional way to help the user find a specific option.
    • For example, most important to least, increasing order (smallest to largest), or alphabetically.
callout-do-list
callout-dont-list

Action

  • Include only one link.
  • The link text should clearly indicate where the link leads.
  • Direct users toward an appropriate action, especially for addressing errors.
  • Be as specific and actionable as possible.
  • If possible, use the same language as the action mentioned in the callout title. For example, if an callout's title is Delete group, its link text would be Delete.

Severity guidelines and examples

 

Info

Inform users about important guidance — “can’t miss” instructions. Then, let them get back to work.

inline-do-1
inline-don't-1

Warning

Inform users about tasks or processes that need their attention but that don’t block them from proceeding. If the warning comes before an action, clearly communicate what will happen if they proceed.

If you're talking about something that has already occurred, use an error message instead.

Do
Don't

Error

Inform users about an issue that they need to resolve before they can move forward with a task. Or, inform users when specific processes are particularly destructive.

Tell users what has gone wrong and what action to take to address the error.

Do
Don't

See: Writing for errors

 

Success

Inform users about successfully completed actions, processes, or states. Confirm the outcome and if users just created something, use the action to let them view it.

Do
Don't

Content accessibility

 

Icons and colors

  • Don’t change callout icons, colors, or text colors.
    Callouts use colors to provide consistent semantic meaning and communicate a level of visual importance for users. Each is designed to meet contrast requirements for accessibility.
    However, color only supports callouts’ messages because it’s not conveyed by assistive technologies.

 

Title and description

  • Use appropriate vocabulary and tone to clearly explain the severity of the callout for users who can’t recognize certain colors.
  • No additional content is needed for accessibility tags or labels.
    When the component is dynamically displayed, the content is automatically announced by most screen readers.

Figma: Callout