MembershipBadge

@hua-labs/ui/data

v1.0.0

A badge component for displaying membership tiers with gradient colors and tier-specific icons.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

모든 등급

BasicProPremiumAdmin

크기

Premium

커스텀 레이블

무료Pro 플랜Premium 플랜관리자

아이콘 없이

BasicProPremiumAdmin

Props

이름	타입	기본값	설명
`tier*`	`"basic" \| "pro" \| "premium" \| "admin"`	-	멤버십 등급 레벨
`label`	`string`	-	커스텀 레이블 (기본값: 등급명)
`size`	`"sm" \| "md" \| "lg"`	`"md"`	배지 크기
`showIcon`	`boolean`	`true`	등급 아이콘 표시 여부

코드 예시

기본 사용법

tsx

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

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

커스텀 옵션

tsx

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

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

ProfileCard SummaryCard