> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nozle.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# PlanBadge

> A small pill with a plan name, coloured by tier.

`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.

**Light**

![PlanBadge in the free, starter, pro and enterprise tiers, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/plan-badge/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=d63a9aede12c8f64676a36ac4c496202)

**Dark**

![PlanBadge in the free, starter, pro and enterprise tiers, dark theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/plan-badge/dark.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=dd45e2e964dcaa1db9f6b4d14ab0458e)

**Minimal**

![PlanBadge in the free, starter, pro and enterprise tiers, minimal theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/plan-badge/minimal.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=3be69d1efca89b0986154db01dc09c85)

**Neobrutal**

![PlanBadge in the free, starter, pro and enterprise tiers, neobrutal theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/plan-badge/neobrutal.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=34776f5437d9f12104b8603525eca1b8)

**Nozle**

![PlanBadge in the free, starter, pro and enterprise tiers, nozle theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/plan-badge/nozle.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=014abd602f834a5eb2454b07ba257e5e)

**Nozle Dark**

![PlanBadge in the free, starter, pro and enterprise tiers, nozleDark theme](https://mintcdn.com/nozle-d78f01d8/8jEvxrWAvqijYzbo/images/react/components/plan-badge/nozle-dark.png?fit=max\&auto=format\&n=8jEvxrWAvqijYzbo\&q=85\&s=9468fd85ea294c1124bf13ef80097877)

## Importing PlanBadge

```tsx theme={null}
import { PlanBadge, type PlanBadgeProps } from '@nozle-js/react'
```

## Rendering PlanBadge

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

```tsx components/account-menu.tsx theme={null}
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`](/sdks/react/hooks#the-hooks) and choose the tier from the plan code yourself:

```tsx theme={null}
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).

![PlanBadge in the free, starter, pro and enterprise tiers, light theme](https://mintcdn.com/nozle-d78f01d8/Ae2cAgwEfN_SPqzG/images/react/components/plan-badge/light.png?fit=max\&auto=format\&n=Ae2cAgwEfN_SPqzG\&q=85\&s=d63a9aede12c8f64676a36ac4c496202)

```tsx theme={null}
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

**plan** `string` *required*

The text of the badge.

**tier** `'free' | 'starter' | 'pro' | 'enterprise'` (default: free)

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

**appearance** `Appearance`

Theme, variables and element overrides on top of the provider's. See [Appearance](/sdks/react/styling).

### Appearance

> **Element keys**
>
> `planBadge` (the pill).
>
> Style them with `appearance.elements`. See [Elements](/sdks/react/styling#elements).

## Related

> **[CurrentPlan](/sdks/react/components/current-plan)**
>
> The plan with status, price and usage.

> **[PlanGate](/sdks/react/components/plan-gate)**
>
> Shows content only on some plans.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.