Upsell card

Upsell card is used to indicate locked features that are accessible only to customers on a different billing plan and prompt customers to upgrade.

#Example

#Usage

#Default

#Minimal

#Extended

#Extended with video

#Extended with image

#Guidelines

#When to use

• When indicating a locked feature that's only accessible on a different billing plan, and prompting the customer to upgrade.

#When not to use

• If a single inline control triggers the upgrade rather than a dedicated page section, use an upsell button instead.
• If confirming a completed upgrade or unlocked feature, use an upsell success dialog instead.

#Actions

It is preferred that upsell cards have a single action, either a Button or LinkButton, in the secondary style.

For best practice, please avoid opening pylon chat or routing to CSE for upsell processes unless advised otherwise. Instead, users should be directed either to the marketing website or a direct demo form embed within the app.

#Props

#UpsellCard

Inherits margin props.

Name	Default	Description
badgeText	—	string Text of a badge at the top of the card.
title	—	string Card title. Usually contains a name of the feature to unlock.
children	—	ReactNode Card content.
actions	—	ReactNode Call-to-action buttons to display in the card. Preferably a secondary button style.

#MinimalUpsellCard

Inherits margin props.

Name	Default	Description
message	—	ReactNode Card message.
actionText	—	string Text of a call-to-action button.
onAction	—	() => void Callback when call-to-action button is clicked.

#ExtendedUpsellCard

Inherits UpsellCard and margin props.

Name	Default	Description
badgeText	—	string Text of a badge at the top of the card.
title	—	string Card title. Usually contains a name of the feature to unlock.
children	—	ReactNode Card content.
actions	—	ReactNode Call-to-action buttons to display in the card. Preferably a secondary button style.
videoPoster	—	string URL to a video thumbnail.
videoUrl	—	string URL to a video that's displayed on the side.
imageUrl	—	string URL to an image that's displayed on the side.