Skip to main content

​
Import

import { UpgradePrompt, CompactUpgradePrompt } from "@billingos/sdk";

​
Basic usage

<UpgradePrompt
  feature="advanced_analytics"
  title="Unlock advanced analytics"
  description="Get deeper insights into your data with the Pro plan."
  onUpgradeClick={() => router.push("/pricing")}
/>
Unlike UpgradeNudge (which triggers automatically), UpgradePrompt is placed manually wherever you want an upgrade CTA.

​
Props

​
feature
string
The feature that requires an upgrade.
​
title
string
Prompt title.
​
description
string
Prompt description.
​
isQuotaExceeded
boolean
Whether this prompt is shown because a quota was exceeded.
​
usage
number
Current usage count (shown when isQuotaExceeded is true).
​
limit
number
Usage limit (shown when isQuotaExceeded is true).
​
onUpgradeClick
() => void
Called when the upgrade button is clicked.
​
className
string
Custom CSS class name.

​
CompactUpgradePrompt

A smaller inline variant for toolbars and sidebars. 
<CompactUpgradePrompt
  feature="export_pdf"
  onUpgradeClick={() => router.push("/pricing")}
/>

​
Props

​
feature
string
Feature key.
​
onUpgradeClick
() => void
Upgrade button handler.
​
className
string
Custom CSS class.

​
Examples

​
As a FeatureGate fallback

<FeatureGate
  feature="custom_reports"
  fallback={
    <UpgradePrompt
      feature="custom_reports"
      title="Custom reports"
      description="Create custom reports with the Pro plan."
      onUpgradeClick={() => router.push("/pricing")}
    />
  }
>
  <ReportBuilder />
</FeatureGate>

​
Quota exceeded prompt

<UpgradePrompt
  isQuotaExceeded={true}
  usage={1000}
  limit={1000}
  title="API call limit reached"
  description="Upgrade your plan to continue making API calls."
  onUpgradeClick={() => setCheckoutOpen(true)}
/>