Callout
Features
- Available in various semantic variants.
- Includes built-in default icons for each variant.
- Enables display of headings and descriptions.
When to use
Use callouts to highlight important information on a page or in a page section. Callouts can result from user action, but don't have to. They can also be used to communicate information that is not critical to the user, but that they should be aware of.
Examples
The callout comes in various colors to complement the message you're communicating. By default, all variants will display a default icon, but you can also pass in a custom icon if needed.
Neutral
Use the neutral variant to communicate information that is not critical to the user.
Info
Use the info variant when you want to draw attention to information that is important, but not critical to the user.
Positive
Use the positive variant to communicate that a desired outcome has been achieved.
Warning
Use the warning variant to guide users away from potential undesired results, or to notify them about unanticipated behaviors or consequences.
Negative
Use the negative variant to communicate that a desired outcome has not been achieved, or that an error has occurred.
Discover
Use the discover variant to communicate new features or functionality that users might not be aware of.
With heading
Use a heading for callouts that require more context. This way, content can be broken up into smaller chunks, making it easier to read and digest.
In general, try to refrain from adding a heading to the callout. The callout should be short and snappy, not a long-read. If you need to add a heading, make sure it's short and concise.
With custom icon
Use a custom icon to communicate a more specific message to the user. Custom icons should be used sparingly, and only to re-inforce the message you're communicating when the default icon does not suffice.
With close button
For notifications that are only relevant in the moment, use a close button to allow users to dismiss the notification. The decision to dismiss the notification should not have any consequences for the user and the message should not be shown again after it has been dismissed unless it becomes relevant again.
Skeleton
The skeleton property is used to display a loading state for the component while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.
CalloutGroup
In general, we discourage stacking multiple callouts on top of each other as it can clutter the UI and make it difficult for users to understand where to focus their attention. But in case it's unavoidable, use our group component to ensure proper spacing between callouts. When stacking callouts, make sure the most important callout is presented first.
Accessibility
To satisfy WCAG 1.1.1 ("All non-text content that is presented to the user has a text alternative that serves the equivalent purpose"), Callouts have visually hidden prefixes applied before the content. These can be overridden using visuallyHiddenPrefix.
| Variant | Prefix |
|---|---|
| Info | Information: |
| Neutral | Information: |
| Positive | Success: |
| Negative | Error: |
| Warning | Warning: |
| Discover | New: |
Related components
- Action banner: A versatile and somewhat unopinionated component. Commonly used as a linkbox to combine multiple elements into a single interactable element.
- Banner: A prominent section at the top of a page that provides users with important feedback or information relating to the entire page, product, or application.
- Promotional Banner: Displays an important, succinct, promotional message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.