PlanBadge

Variable: PlanBadge

const PlanBadge: React.FC<PlanBadgeProps>

Defined in: packages/react/src/components/PlanBadge.tsx:33

Headless Plan Badge Component

Displays purchase status with complete styling control. Supports render props, custom components, or className patterns.

Prevents flickering by hiding the badge during initial load and when no purchase exists. Shows the badge once loading completes AND an active purchase exists (paid or free). Badge only updates when the plan name actually changes (prevents unnecessary re-renders).

Displays the primary active purchase (paid or free) to show current plan status.

Example

// Render prop pattern
<PlanBadge>
  {({ purchases, loading, displayPlan, shouldShow }) => (
    shouldShow ? (
      <div>{displayPlan}</div>
    ) : null
  )}
</PlanBadge>

//ClassName pattern
<PlanBadge className="badge badge-primary" />

Variable: PlanBadge

Example​

Example