Badge with avatar
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A person chip with a 14px avatar photo, a first name and a trailing remove X in one outline label
When to use
- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link
When not to use
- A tag led by a glyph that names no person and cannot be removed: use the Badge With Icon example
- An action that saves, opens or submits a form when pressed: use the Button component
- Helper text revealed when a control is hovered or focused: use the Tooltip component
- A finished KPI or profile tile with a trend or status chip as one detail: use the Card blocks
Agent notes
- Replace the sample Unsplash
AvatarImage, the ALAvatarFallbackand the name Alex with the real user - The remove
Buttonhas no handler or accessible name, so wire the removal and label it with the person's name - Import
Badgefrom@/components/reui/badge; the shadcnBadgeof the same name lackssize,radiusand the success, info and warning variants - The default
radiusfollows the style, square in lyra and sera and a pill in maia, luma and rhea;radiusfull gives a pill in every style
https://reui.io/components/badge/c-badge-24.mdget_example("c-badge-24")npx shadcn@latest add @reui/c-badge-24About Shadcn Badge With Avatar
Badge with avatar. Built by composing Avatar, Badge, Button. A free, open source shadcn badge example you can install with npx shadcn@latest add @reui/c-badge-24 and edit as your own code.
What You Can Build With Shadcn Badge With Avatar
- Composes Avatar, Badge, Button, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-badge-24
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Badge Examples
- Default Default badge
- Secondary Secondary badge
- Destructive Destructive badge
- Success Success badge
- Info Info badge
- Warning Warning badge
- Outline Outline badge
- Primary Outline Primary outline badge
- Destructive Outline Destructive outline badge
- Info Outline Info outline badge
- Success Outline Success outline badge
- Warning Outline Warning outline badge
Related Shadcn Component Categories
Open-source shadcn breadcrumb components for navigation trails, docs hierarchy, and app wayfinding.
Open-source shadcn bubble components for chat threads, assistant replies, and message reactions.
Open-source shadcn button components for primary actions, form submissions, and toolbar controls.
Open-source shadcn button group components for segmented controls, toolbar actions, and view switchers.
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Frequently Asked Questions
When should I use Shadcn Badge With Avatar?
Use it for a person chip with a 14px avatar photo, a first name and a trailing remove X in one outline label.
Shadcn Badge as a whole fits:
- Status and severity labels in solid, light and outline tones for success, warning, info and errors
- Counts and short tags such as an unread number or a New marker, sized to the text around them
- Compact chips pairing a label with an icon, a dot, an avatar, a flag or a remove control, or acting as a link
For a tag led by a glyph that names no person and cannot be removed, use the Badge With Icon example. For an action that saves, opens or submits a form when pressed, use the Button component. For helper text revealed when a control is hovered or focused, use the Tooltip component. For a finished KPI or profile tile with a trend or status chip as one detail, use the Card blocks.
How do I install Shadcn Badge With Avatar?
Is Shadcn Badge With Avatar free to use?
Which components does Shadcn Badge With Avatar use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.