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. But, as a component it was overused for all kinds of information. We hope our guidelines, and new name, clarify its use.

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

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

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

Behaviors

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.

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.

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

• Include only text. The component doesn’t support images or other content types.
• 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.
• 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.

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.

See Link

Severity guidelines and examples

Info

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

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.

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.

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.

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