MembershipBadge

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { MembershipBadge } from "@hua-labs/ui/advanced/dashboard";

BasicProPremiumAdmin

Premium

BasicProPremiumAdmin

Props


`tier*`	`"basic" \| "pro" \| "premium" \| "admin"`	-	Membership tier level
`label`	`string`	-	Custom label (defaults to tier name)
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Badge size
`showIcon`	`boolean`	`true`	Whether to show the tier icon

docs:common.basicUsage

tsx

import { MembershipBadge } from "@hua-labs/ui/advanced/dashboard";

export function BasicMembershipBadge() {
  return (
    <div className="flex gap-2">
      <MembershipBadge tier="basic" />
      <MembershipBadge tier="pro" />
      <MembershipBadge tier="premium" />
      <MembershipBadge tier="admin" />
    </div>
  );
}

docs:common.customOptions

tsx

import { MembershipBadge } from "@hua-labs/ui/advanced/dashboard";

export function CustomMembershipBadge() {
  return (
    <MembershipBadge
      tier="pro"
      label="Pro Plan"
      size="lg"
      showIcon={false}
    />
  );
}

ProfileCard SummaryCard