ID Badge
A propaganda-style identity badge with avatar, name, role, and active star indicator.
IP
ENGINEERIvan Petrov
DIRECTORMaria Volkov
WORKERAlexei Sorokin
YG
Yuri Gagarin
Installation
pnpm dlx shadcn@latest add https://propcore.dev/r/id-badge.jsonUsage
import { IdBadge } from "@/components/ui/id-badge"<IdBadge
name="Ivan Petrov"
role="ENGINEER"
active
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Person's name |
role | string | "COMRADE" | Role/title displayed above name |
src | string | - | Avatar image URL |
alt | string | - | Avatar alt text |
fallback | string | - | Initials to show if no image |
active | boolean | false | Shows diagonal red stripe with star |
variant | "default" | "compact" | "default" | Size variant |
className | string | - | Additional CSS classes |
Examples
With Image
<IdBadge
name="Maria Volkov"
role="DIRECTOR"
src="/avatar.jpg"
/>Active Status
<IdBadge
name="Alexei Sorokin"
role="WORKER"
active
/>Compact Variant
<IdBadge
name="Yuri Gagarin"
variant="compact"
/>Features
- Red left edge accent for visual emphasis
- Diagonal active indicator with star
- Automatic initials from name when no image
- Compact variant for tight spaces