Image Badge Demo

About Image Badge

The Image Badge component extends the Badge component from shadcn/ui to support images with configurable positioning and sizing.

Installation

1. Install the badge component from shadcn/ui:

npx shadcn-ui@latest add badge

2. Copy the ImageBadge component to your project:

// Copy ImageBadge.tsx to your components directory

Demo

User avatar@shadcn
User avatarDefault
User avatarSecondary
User avatarDestructive
User avatarImage Left
Image RightUser avatar
User avatarLarger Image

Usage

import { ImageBadge } from "@/components/ui/common/ImageBadge"

export default function Demo() {
  return (
    <ImageBadge
      imageSrc="https://github.com/shadcn.png"
      imageAlt="User avatar"
      imagePosition="left"
      imageRounded={true} // default is true
      variant="default"   // or "secondary", "destructive", "outline"
    >
      @shadcn
    </ImageBadge>
  )
}