Skip to main content
Pricing

Plan Badge

Free

A small coloured label indicating the user's current plan tier (Free, Pro, Enterprise). Used in account menus, navigation headers, and settings pages to provide instant context about subscription level. Colour-coded by tier with appropriate contrast.

6 variants

Plan
Free

Variants

VariantDescriptionWhen to use
FreeNeutral grey badge for the free tier.Display alongside user info when on the free plan.
ProBrand-coloured badge for the paid pro tier.Display when the user has an active Pro subscription.
EnterprisePremium-styled badge with distinct colour for enterprise accounts.Display for enterprise-tier accounts.

Usage Guidelines

Do

Use consistent colours per tier across the entire product.

Don't

Use plan badges as interactive elements — they are informational only.

Do

Place near the user's name or account section for context.

Don't

Change badge colours between views — consistency builds recognition.

Do

Keep label text short — one word like "Free", "Pro", "Enterprise".

Don't

Use the badge to upsell — pair with a separate upgrade CTA instead.

Code

HTML
<span class="lex-plan-badge lex-plan-badge--free">Free</span>
<span class="lex-plan-badge lex-plan-badge--pro">Pro</span>
<span class="lex-plan-badge lex-plan-badge--enterprise">Enterprise</span>
CSS Custom Properties
.lex-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--lex-space-2) var(--lex-space-8);
  border-radius: var(--lex-radius-pill);
  font-size: var(--lex-font-size-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.lex-plan-badge--free {
  background: var(--lex-plan-badge-free-bg, var(--lex-bg-surface-subtle));
  color: var(--lex-plan-badge-free-color, var(--lex-text-secondary));
}

.lex-plan-badge--pro {
  background: var(--lex-plan-badge-pro-bg);
  color: var(--lex-plan-badge-pro-color);
}

.lex-plan-badge--enterprise {
  background: var(--lex-plan-badge-enterprise-bg);
  color: var(--lex-plan-badge-enterprise-color);
}
React
// Using Lexicon CSS classes with React

export function AccountHeader({ plan }: { plan: 'free' | 'pro' | 'enterprise' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span>Jonathan Pace</span>
      <PlanBadge tier={plan} />
    </div>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-badge-bg——bg
--lex-badge-text——text
--lex-badge-radius——radius
--lex-badge-padding——padding

Accessibility

  • Badge text alone conveys the plan — no reliance on colour alone.
  • Use aria-label if the badge needs additional context, e.g. aria-label="Current plan: Pro".
  • Ensure 4.5:1 contrast ratio between badge text and its background.

Keyboard Interactions

TabBadge is not focusable — it is purely informational.