An Actionable Callout delivers a short, important message without disrupting a user’s workflow.
It is a type of Notification Message, so choosing the right messaging approach is essential.
It contains an icon, description, and button. These are all required and should not be hidden.
A title, dismiss button, and a link (to related content or pages) are all optional. The optional dismiss (“x”) button in the upper right corner lets users dismiss the callout at their convenience.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
Icon |
Visual indicator to communicate context and severity at a glance. |
No |
|
Description |
Primary message |
No |
|
Button |
Primary action |
No |
|
Highlight border |
Visual indicator to anchor callout and communicate context and severity at a glance. |
No |
|
Title |
A concise summary in a few words to understand the message at a glance. |
Yes |
|
Link |
A subtle, supporting action, such as a link to relevant documentation. |
Yes |
|
Dismiss button |
Lets the user dismiss the callout at their convenience. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| type Variant | info | success | warning | danger | new feature | info |
| dismissButton Boolean | true | false | true |
| title Boolean | true | false | true |
Type
Six types are available based on the contextual requirement or severity of the information:
- Informational
- Warning
- Error
- Success
- Promotional
- Upsell (special variant for free trial or upgrade flows for Product Growth only)
Dismiss button
The dismiss button can be turned off/on depending on the permanency required for the Actionable Callout.
Description only
Titles can be turned off when contextually not suitable.
Link
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.
Behavior
An Actionable Callout remains in place until dismissed or the page's state changes as part of a running action.
It can also be left on screen for an indeterminate amount of time.
Component dependencies
This component is internally dependent on the following components:
Related components
Recommended reading
Other documentation that will help guide your thinking when working with this component.
Help and support