PlanBadge

PlanBadge shows a plan name as a pill, coloured by one of four tiers and your theme. When to use

Next to the account or workspace name in your app’s header or menu.
In a team or customer list.
On a feature that needs a higher plan.

Importing PlanBadge

import { PlanBadge, type PlanBadgeProps } from '@nozle-js/react'

Rendering PlanBadge

Pass any text as plan and pick a tier for the colour:

components/account-menu.tsx

export function AccountMenu() {
  return (
    <span>
      Acme Inc. <PlanBadge plan="Pro" tier="pro" />
    </span>
  )
}

The label uses the theme’s small label font, so themes with uppercase labels show it in capitals.

Data

The badge needs only a label and a tier; it does not read or know your plans.

Live data

Take the plan name from useSubscription and choose the tier from the plan code yourself:

import { useSubscription } from '@nozle-js/react'

const tiers: Record<string, PlanBadgeProps['tier']> = { free: 'free', pro: 'pro', scale: 'enterprise' }

export function AccountPlan() {
  const { data } = useSubscription()
  const plan = data?.subscription?.plan
  if (!plan) return null
  return <PlanBadge plan={plan.name} tier={tiers[plan.code] ?? 'free'} />
}

Examples

Tiers

The four tiers: free (muted), starter (tinted primary), pro (primary) and enterprise (accent).

export function Badges() {
  return (
    <>
      <PlanBadge plan="Free" tier="free" />
      <PlanBadge plan="Starter" tier="starter" />
      <PlanBadge plan="Pro" tier="pro" />
      <PlanBadge plan="Enterprise" tier="enterprise" />
    </>
  )
}

API reference

string

required

The text of the badge.

'free' | 'starter' | 'pro' | 'enterprise'

default:"free"

The colour: free uses colorMuted with a border, starter a tint of colorPrimary, pro colorPrimary, enterprise colorAccent.

Appearance

Theme, variables and element overrides on top of the provider’s. See Appearance.

Appearance

Element keys

planBadge (the pill).Style them with appearance.elements. See Elements.

CurrentPlan

The plan with status, price and usage.

PlanGate

Shows content only on some plans.

Setup

Components

Billing

Entitlements

Importing PlanBadge

Rendering PlanBadge

Data

Live data

Examples

Tiers

API reference

Appearance

CurrentPlan

PlanGate

​Importing PlanBadge

​Rendering PlanBadge

​Data

​Live data

​Examples

​Tiers

​API reference

​Appearance

​Related

CurrentPlan

PlanGate

Importing PlanBadge

Rendering PlanBadge

Data

Live data

Examples

Tiers

API reference

Appearance

Related