# Avatar ```mdx
@shadcn CN @evilrabbit ER
@shadcn CN @maxleiter LR @evilrabbit ER
``` ## Usage Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, Avatar component CSS, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/avatar.css"; @import "basecoat-css/styles/vega.css"; ``` Using CDN or bundler imports? See the [Installation page](/installation). Add `class="avatar"` to a small inline container. Add `data-size="sm"` or `data-size="lg"` when needed. Put the image first and a fallback `` after it. Add `.avatar-badge` for a status badge or badge icon. ```html @shadcn CN ``` ### HTML structure
<div class="avatar-group"> Optional
Optional parent that groups avatars with overlap.
<span class="avatar">
Avatar root. Use it standalone or as a direct child of .avatar-group. Add data-size="sm" or data-size="lg" for alternate sizes.
<img> Optional
The avatar image. Provide meaningful alt text.
<span>
Fallback initials or icon.
<span class="avatar-badge"> Optional
Status badge positioned at the block-end inline-end corner. It can be empty or contain an icon.
<span data-count> Optional
Count or icon indicator displayed at the end of the group.
## Examples ### Basic ```mdx @shadcn CN ``` ### Badge ```mdx @shadcn CN ``` ### Badge with icon ```mdx @pranathip PP ``` ### Avatar group ```mdx
@shadcnCN @maxleiterLR @evilrabbitER
``` ### Avatar group count ```mdx
@shadcnCN @maxleiterLR @evilrabbitER +3
``` ### Avatar group with icon ```mdx
@shadcnCN @maxleiterLR @evilrabbitER
``` ### Sizes ```mdx
@shadcn CN @shadcn CN @shadcn CN
CN CN CN
``` ### Dropdown ```mdx
``` ### RTL ```mdx
@shadcn CN @evilrabbit ER
@shadcnCN @maxleiterLR @evilrabbitER
```