ArtistBadge Component

Small artist display with avatar and name. Perfect for inline artist references and compact layouts.

Basic Artist Badge

<ArtistBadge 
  artist={{
    name: "Sarah Smith",
    slug: "sarah-smith",
    avatar: "https://example.com/avatar.jpg"
  }}
/>

Different Sizes

Small

Medium (Default)

Large

<ArtistBadge artist={artist} size="sm" />
<ArtistBadge artist={artist} size="md" />
<ArtistBadge artist={artist} size="lg" />

With Verified Badge

<ArtistBadge 
  artist={{
    name: "Chris Stapleton",
    slug: "chris-stapleton",
    avatar: "https://example.com/avatar.jpg",
    verified: true
  }}
/>

Without Avatar

<ArtistBadge 
  artist={{
    name: "Unknown Artist",
    slug: "unknown-artist"
  }}
/>

Avatar Only

<ArtistBadge 
  artist={{
    name: "Sarah Smith",
    slug: "sarah-smith",
    avatar: "https://example.com/avatar.jpg"
  }}
  showName={false}
/>

In Context

New track from

just dropped!

Featuring:

<p>
  New track from <ArtistBadge artist={artist} size="sm" /> just dropped!
</p>

<div class="flex items-center gap-2">
  <span>Featuring:</span>
  <ArtistBadge artist={artist1} size="sm" />
  <span>&</span>
  <ArtistBadge artist={artist2} size="sm" />
</div>

Props Reference

Prop	Type	Default	Description
artist	Artist	required	Artist information object
size	'sm' \| 'md' \| 'lg'	'md'	Badge size
showName	boolean	true	Show artist name
className	string	undefined	Additional CSS classes

Artist Interface

interface Artist {
  name: string;
  slug: string;
  avatar?: string;
  verified?: boolean;
}