Plan Badge
Indicateur de niveau d'abonnement pour la tarification, la facturation et les recapitulatifs de compte. Installez Plan Badge depuis le registre VLLNT UI avec la CLI shadcn.
Indicateur de niveau d'abonnement pour la tarification, la facturation et les recapitulatifs de compte. Fait partie de la famille content dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Plan Badge a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/plan-badge.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
import { badgeVariants } from "../badge/badge";
export type PlanBadgeTier = "enterprise" | "free" | "growth" | "starter";
export type PlanBadgeState = "current" | "legacy" | "trial";
export type PlanBadgeProps = Omit<
React.ComponentPropsWithoutRef<"span">,
"children"
> & {
label?: string;
state?: PlanBadgeState;
tier: PlanBadgeTier;
};
function getPlanLabel(tier: PlanBadgeTier): string {
switch (tier) {
case "enterprise":
return "Enterprise";
case "free":
return "Free";
case "growth":
return "Growth";
case "starter":
return "Starter";
}
}
function getPlanClasses(tier: PlanBadgeTier, state: PlanBadgeState): string {
if (state === "legacy") {
return "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
}
if (state === "trial") {
return "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300";
}
switch (tier) {
case "enterprise":
return "border-primary/30 bg-primary/10 text-primary";
case "free":
return "border-border bg-muted text-muted-foreground";
case "growth":
return "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-300";
case "starter":
return "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
}
}
export const PlanBadge = ({
className,
label,
ref: reference,
state = "current",
tier,
...props
}: PlanBadgeProps & { ref?: React.Ref<HTMLSpanElement> }) => {
return (
<span
className={cn(
badgeVariants({ variant: "outline" }),
"gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-none",
getPlanClasses(tier, state),
className,
)}
ref={reference}
{...props}
>
<span aria-hidden="true" className="size-1.5 rounded-full bg-current" />
<span>{label ?? getPlanLabel(tier)}</span>
{state === "trial" ? (
<span className="text-current/80">Trial</span>
) : null}
{state === "legacy" ? (
<span className="text-current/80">Legacy</span>
) : null}
</span>
);
};
PlanBadge.displayName = "PlanBadge";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.