Use a Callout to highlight important information on a page. Callouts are less restrictive than Alerts or Toasts—they can result from user action, but don’t have to.
Do not use a Callout to tell users about a system-level issue; use an Alert instead. For additional guidance on what kind of component to use, reference the Alert vs. Callout vs. Toast vs. Help Text guide.
Callouts should have a CalloutHeading so that the information is easier to navigate to for people who use screen readers. The CalloutHeading's level should be set appropriately with the as prop. It is important to not skip one or more heading levels as it is common for screen readers to build an outline of the page and assist users as they navigate a page.
There are five variants of Callouts: neutral, success, warning, error, and new. Each variant includes an icon.
To internationalize the icon label for a variant, pass the i18nLabel prop.
Use a neutral Callout to communicate relevant information to the page or flow. This information is often static.
Use a success Callout to communicate that the desired outcome was achieved. A success Callout can be appropriate when the outcome is relevant to a specific part of the page, or when additional information or context needs to be provided.
When composing a success Callout, avoid using the word "successfully" since it's redundant.
Use a warning Callout to help users avoid an undesirable outcome, or inform users of unexpected behaviors or outcomes.
A warning Callout should should explain the possible issue, what to do, and what happens if they don't.
Use an error Callout to communicate errors for a particular section of a page, or that applies to the whole page. For additional guidance on how to compose error messages, refer to the error state pattern.
Use a new Callout to spotlight a recent addition or update.
Make a Callout dismissible with the onDismiss prop if it doesn't communicate a persistent status of the system or the account, or you provide another way for the user to access the information.
Callouts can have lists of information within them, and are useful for providing error summaries when there are many errors on the page. When creating an error summary, still include inline error messaging using the Help Text component for each field.
Use the CalloutList and CalloutListItem components to make sure the text is the appropriate color for the variant.
Callouts can be inline with text, so use the marginY prop to add a vertical margin. To add a margin only one side, wrap the Callout in a Box to style it further.
Compose a Callout with:
- Heading (optional). The heading should be concise and convey the essence of the issue.
- Body text. Use the default text style. Do not repeat information contained in the heading. If the user needs to take action on another page, or more information would be helpful, include an Anchor.
- Full punctuation. Use periods after full sentences.
Alert
- Alerts communicate information relevant at the system level.
- Do not use Alerts in response to user action.
Callout
- Callouts communicate information particular to a section of a page, or information that applies to a whole page.
- Use a Callout when there are multiple pieces of information to convey. For example, an error summary.
- Callouts can result from a user action, but don’t have to. Therefore, they can include either static or contextual content.
Toast
- Toasts communicate brief, easily comprehended messages.
- Toasts result from a user action.
- If the message is contextual or specific to a particular part of a page, consider Help Text or a Callout.
- Do not use a Toast if the message is longer than two sentences (~140 characters). Use a Callout instead.
- Do not use a Toast if there is more than one Anchor or Button. Use a Callout instead.
Help Text
- Help Text communicates contextual responses.
- Help Text can result from a user action, but don’t have to.