Upsell.Form can be used to add a short form to Upsell for collecting data from the user.
submitButtonAccessibilityLabel each require a short, descriptive label for screen readers, which should also be localized.
In the case of action Buttons or Links, 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 IconButton, the label provided should indicate the intent, like “Dismiss this banner”.
The Image or Icon supplied to
imageData should only supply an
accessibilityLabel, respectively, if the Image or Icon supplies extra context or information. Icons in Upsells are often purely decorative, and can therefore have an empty string as the
Remember to localize all link or button labels, as well as
Used to convey a short message that requires no action, except dismiss.
The Image in Upsell is used to add visual interest and draw the user’s attention. Images should relate to the message of the Upsell. Upsell images should use approved photography or be illustrations using our brand colors. Images will always be 128px wide.
Upsells can have either one primary action, or a primary action and a secondary action. These actions can be buttons, when no
href is supplied, or links, by specifying the
Upsell 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 “Send invite” could be a button that opens a Modal with an invite 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.
Inputs can be added to Upsells to collect information from users (ex: name or email) through the use of
Upsell.Form. Most Upsells should have no more than 2 inputs. If more inputs are needed, direct users to a full page using the
Component quality checklist
Component is live in Figma, however may not be available for all platforms.
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.
Use Callout when communicating critical information, such as an error or warning. Callout can also be used to present the user with general information and further actions they can take, like the successful creation of a business account.
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.
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.
ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.