secondaryAction each require a short, descriptive label for screen readers. These labels should communicate the intent of the icon, such as “Error”, “Info” or “Warning”. They should also be localized.
secondaryAction, alternative text should be provided through the
accessibilityLabel prop to replace vague text like "Visit" or "Learn more" with more descriptive information, like "Learn more about work from home resources". Avoid using the words "button" or "link" in the label, as this becomes repetitive. If the action text is already descriptive, an empty string can be passed.
dismissButton, the label provided should indicate the intent, like “Dismiss this banner”.
Remember to localize all link or button labels, as well as
Info Callouts communicate helpful messages to users about the product. In most cases, they should provide an action for users to take.
Recommendation Callouts inform people of quick things they can do to improve their experience.
Success Callouts communicate confirmation regarding an action within a larger flow.
Warning Callouts communicate cautionary messages to users. Action shouldn't be required. The Callout should provide clear guidance on how to correct an issue and/or learn more about it.
Error Callouts inform users of problems that require immediate action to correct. Further actions on the page might be blocked if users don't correct the problems. The Callout should also provide clear guidance on how to correct the issue and/or learn more about it.
Callout actions with link interaction can be paired with OnLinkNavigationProvider. See OnLinkNavigationProvider to learn more about link navigation.
For example, “Learn more” may link to a separate documentation site, while “Apply now” could be a Button that opens a Modal with an application flow. Be sure to localize the labels of the actions.
If needed, actions can become disabled after clicking by setting
disabled: true in the action data.
dismissButton can be used when Callout doesn't indicate a persistent state. This will most commonly be used in
Don't use dismiss buttons in the following cases:
- There is a persistent account or page status that the user must address.
- The user must access Callout's information again in order to perform a task.
Component quality checklist
Component is slotted to be added to Figma.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.
If marketing new products or features, or encouraging upgrades, use Upsell instead.
Toast provides feedback on a user interaction, like a confirmation that appears when a Pin has been saved. Unlike Upsell and Callout, Toasts don’t contain actions. They’re also less persistent, and disappear after a certain duration.
ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.