Upsell

View source on GitHub
; Opens a new tab
See recent changes on GitHub
; Opens a new tab

Upsells are banners that display short messages that focus on promoting an action or upgrading something the user already has.

also known as Banner, Offer Banner, CTA Banner

Figma:
Partially ready
Web:
Ready
iOS:
N/A
Android:
N/A
A11y:
Ready

Props

Component props
Name
Type
Default
message
Required
string | React.Element<typeof Text>
-

Main content of Upsell, explains what is being offered or recommended. Content should be localized. See the Message variant to learn more.

children
React.Element<typeof UpsellForm>
-

To create forms within Upsell, pass Upsell.Form as children.

dismissButton
{|
  accessibilityLabel: string,
  onDismiss: () => void,
|}
-

Adds a dismiss button to the Upsell. The `accessibilityLabel` should follow the Accessibility guidelines.

imageData
{|
  component: React.Element<typeof Image | typeof Icon>,
  mask?: {|
    rounding?: "circle" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8,
    wash?: boolean,
  |},
  width?: number,
|}
-

Either an Icon or an Image to render at the start of the banner. Width is not used with Icon. Image width defaults to 128px. See the Icon and Image variants for more info.

primaryAction
{|
  accessibilityLabel: string,
  disabled?: boolean,
  href?: string,
  label: string,
  onClick?: ({|
    event:
      | SyntheticMouseEvent<HTMLButtonElement>
      | SyntheticMouseEvent<HTMLAnchorElement>
      | SyntheticKeyboardEvent<HTMLAnchorElement>
      | SyntheticKeyboardEvent<HTMLButtonElement>,
    dangerouslyDisableOnNavigation: () => void,
  |}) => void,
  rel?: "none" | "nofollow",
  target?: null | "self" | "blank",
|}
-

Main action for people to take on Upsell. If `href` is supplied, the action will serve as a link. See OnLinkNavigationProvider to learn more about link navigation.'
If no `href` is supplied, the action will be a button.
The `accessibilityLabel` should follow the Accessibility guidelines.

secondaryAction
{|
  accessibilityLabel: string,
  disabled?: boolean,
  href?: string,
  label: string,
  onClick?: ({|
    event:
      | SyntheticMouseEvent<HTMLButtonElement>
      | SyntheticMouseEvent<HTMLAnchorElement>
      | SyntheticKeyboardEvent<HTMLAnchorElement>
      | SyntheticKeyboardEvent<HTMLButtonElement>,
    dangerouslyDisableOnNavigation: () => void,
  |}) => void,
  rel?: "none" | "nofollow",
  target?: null | "self" | "blank",
|}
-

Secondary action for people to take on Upsell. If `href` is supplied, the action will serve as a link. See OnLinkNavigationProvider to learn more about link navigation.'
If no `href` is supplied, the action will be a button.
The `accessibilityLabel` should follow the Accessibility guidelines.

title
string
-

Brief title summarizing the Upsell. Content should be localized.

Subcomponents

Upsell.Form

Upsell.Form can be used to add a short form to Upsell for collecting data from the user.

Upsell.Form Props

Upsell.Form subcomponent props
Name
Type
Default
children
Required
React.Node
-

Contents of the form, typically input components like TextField or NumberField.

onSubmit
Required
({|
  event:
    | SyntheticMouseEvent<HTMLButtonElement>
    | SyntheticMouseEvent<HTMLAnchorElement>
    | SyntheticKeyboardEvent<HTMLAnchorElement>
    | SyntheticKeyboardEvent<HTMLButtonElement>,
|}) => void
-

Callback triggered when the form is submitted.

submitButtonAccessibilityLabel
Required
string
-

Label for the submit button used for screen readers. Should follow the Accessibility guidelines. Be sure to localize!

submitButtonText
Required
string
-

Text content of the submit button. Be sure to localize!

submitButtonDisabled
boolean
-

Used to disable the submit button.

Usage guidelines

When to use
  • Displaying promotional information to a user that is not tied to a task or state on the surface.
  • Sharing updates or changes to the features and offerings of the product.
When not to use
  • Anything related to state or status within the surface. Consider a Callout instead.
  • Promoting or highlighting specific elements / areas within a surface. Let the team know if this is needed.

Best practices

Do

Use Upsells for marketing new products or encouraging upgrades.

Do

Place Upsell at the top of the page under the primary navigation when possible.

Do

Plan for the timing of your Upsells with new product launches. Try to create different messages for each time an Upsell appears to the user.

Don't

Use Upsells for critical information, such as errors or warnings. Use Callout instead. Upsells should not be used for general information either.

Don't

Stack Upsells on a page. In the case that they must be stacked, Callouts will appear above Upsells.

Don't

Keep showing the same Upsell once it has been dismissed. Upsells should only appear a maximum of 2 times to the same user, as they have diminishing returns.

Accessibility

Labels

dismissButton, primaryAction, secondaryAction, and 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.

For the dismissButton IconButton, the label provided should indicate the intent, like “Dismiss this banner”.

The Image or Icon supplied to imageData should only supply an alt or 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 accessibilityLabel.

Localization

Remember to localize all link or button labels, as well as title and message.

Variants

Text-only

Used to convey a short message that requires no action, except dismiss.

Icon

The Icon is used to add additional meaning to the Upsell. The icon can reference a Pinterest product, feature or an action from our Icon library.

Image

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.

Actions

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 href property.

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.

Forms

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 primaryAction.

Single TextField
Multiple TextFields

Message

The message prop accepts either a string or Text. Use a string for simple messages without any visual style. Upsell will handle the text style and adherence to design guidelines.

If the message text requires more complex style, such as bold text or inline links, use Text to wrap your message with any additional Text or Link usages contained within. When passing in your own Text component for text, do not specify color or align Text.

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Partially ready
Component is live in Figma, however may not be available for all platforms.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.

Callout
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
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
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.

ActivationCard
ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.

Edit page on GitHub
; Opens a new tab