Profile Badge

A profile badge with avatar, name, and role for author and team credits.

Selin AksoyProduct Designer

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Badge16 } from "@/components/beste/component/badge16";

<Badge16 src="/avatars/selin.jpg" name="Selin Aksoy" role="Product Designer" />

<Badge16
  src="/avatars/mert.jpg"
  name="Mert Yilmaz"
  role="@mert"
  href="https://x.com/mert"   // renders as a link
  tone="muted"                // "neutral" (default) | "muted"
/>