A Callout communicates either an important, high-visibility message (standard variant) or a non-urgent, medium-visibility message (outlined variant). It may also prompt users to take action without disrupting their workflow.
It is a type of Notification Message, so choosing the right messaging approach is essential.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Icon |
Visual indicator to communicate context and severity at a glance. These are pre-defined based on the type of callout. |
No |
|
2. Title |
A concise summary in a few words to understand the message at a glance. |
Yes |
|
3. Description |
Primary message. |
No |
|
4. Inline link |
A subtle, supporting action, such as a link to relevant help docs. |
Yes |
|
5. Dismiss button |
Lets the user dismiss the Callout at their convenience. |
Yes |
|
6. Container (standard) |
Filled container to catch the user’s attention and highlight the message’s importance. |
No (for standard variant) |
|
7. Button |
Primary action. |
Yes |
|
8. External link |
Alternative option for the primary action (instead of a Button) if it is an external link. Uses the Link component. |
Yes |
|
9. Container (outlined) |
Border to contain the message’s content and anchor the dismiss button. |
No (for outlined variant) |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | standard | outlined | standard |
| hasDismissButton Boolean | true | false | true |
| hasTitle Boolean | true | false | true |
| hasAction Variant | false | true | false |
| messageState Variant | info | success | warning | danger | feature | upsell | info |
| ↳ hasExternalLink Variant | false | true | false |
Type
Six types are available based on the contextual requirement or severity of the information, where the type determines the colours and icon:
- Informational
- Warning
- Danger
- Success
- Feature
- Upsell (special variant for free trial or upgrade flows only)
Dismiss button
The dismiss button can be turned off/on depending on the permanency required for the Callout.
Description only
Titles can be turned off when contextually not suitable.
Actions
Callouts can display a primary action, either as a Button or external Link. The upsell variant is unique, in that the primary action is not optional and can display a Link as a secondary action.
Link in description
A link can be added to the description text (not the title) to help guide the user to a solution or corresponding documents/pages. Use a maximum of one link in the description.
External link as primary action
Do not use a button if the primary action is an external link. Instead, use the Link component with an external link icon.
Behavior
Callouts remain in place until dismissed or the page's state changes as part of a running action. They can also be left on screen for an indeterminate amount of time.
Component dependencies
This component is internally dependent on the following components:
System Icons
Button
Buttons allow users to take actions that will trigger a response.
Link
Links navigate users to a different page, section, or external page.
Related components
Inline Message
Inline Message highlights a short, non-urgent contextual message and prompts the user to take action.
Error Summary
Highlights one or more server errors, either due to exceptional circumstances or form validation issues.
Recommended reading
Other documentation that will help guide your thinking when working with this component.
Notification Messaging
How to provide relevant information to users at the right time.
Error Messages
How to write thoughtful error messaging to increase successful interactions.
Help and support