Skip to main content

Function: SubscriptionPanel()

SubscriptionPanel(__namedParameters): Element

Defined in: subscriptionPanel/SubscriptionPanel.tsx:62

SubscriptionPanel displays comprehensive subscription information including plan details, status, actions, and various metrics.

It supports three types of metrics:

  • Date: For displaying dates like expiration or renewal
  • Percentage: For usage-based metrics with progress bars
  • Number: For count-based metrics

Parameters​

__namedParameters​

SubscriptionPanelProps

Returns​

Element

Examples​

<SubscriptionPanel
  planName="Premium Plan"
  price={{ value: "R$ 99,00", interval: "mês" }}
  status={{ status: "active", interval: "Mensal" }}
  features={[{ label: "Feature 1" }, { label: "Feature 2" }]}
  actions={[
    { label: "Upgrade", onClick: () => {}, variant: "accent" },
    { label: "Cancel", onClick: () => {}, variant: "danger" },
  ]}
  metrics={[
    { type: "date", label: "Expira em", date: "15/01/2025", icon: "fluent:calendar-24-regular" },
    { type: "percentage", label: "Uso", current: 75, max: 100, icon: "fluent:data-usage-24-regular" },
  ]}
/>
// Compact mode for smaller spaces
<SubscriptionPanel
  planName="Basic Plan"
  price={{ value: "R$ 29,00", interval: "mês" }}
  status={{ status: "active" }}
  compact
/>