Influencer Badge

Achievement and status badges with gradient backgrounds and icons.

Preview

Verified

Creator

Trending

Usage

import { InfluencerBadge } from "@/components/profile"

<InfluencerBadge type="verified" />
<InfluencerBadge type="creator" size="lg" />
<InfluencerBadge type="trending" />
<InfluencerBadge type="custom" label="Top 1%" />

Badge Types

Verified

verified

Creator

creator

Trending

trending

Top Creator

top

Premium

premium

Popular

popular

<InfluencerBadge type="verified" />   // Blue checkmark
<InfluencerBadge type="creator" />    // Pink palette
<InfluencerBadge type="trending" />   // Orange flame
<InfluencerBadge type="top" />        // Gold crown
<InfluencerBadge type="premium" />    // Violet star
<InfluencerBadge type="popular" />    // Pink heart

Sizes

Verified

Compact

Use small badges to keep profile rows compact.

Verified

Creator

Trending

Top Creator

Premium

Popular

<InfluencerBadge type="verified" size="sm" />

Usage Examples

Badges work great next to usernames and in profile headers.

@creativestudio

Verified

Sarah Creative

Creator

Top Creator

Props

Prop	Type	Default	Description
type	"verified" \| "creator" \| "trending" \| "top" \| "new" \| "premium" \| "popular" \| "custom"	-	Badge type
size	"sm" \| "md" \| "lg"	"md"	Badge size
label	string	type label	Custom badge label