*:not(:first-child)]:ml-[calc(-0.5*var(--avatar-overlap))] [&>[data-slot=avatar]]:box-content [&>[data-slot=avatar]]:border [&>[data-slot=avatar]]:border-[var(--hui-color-background-base-primary)] [&>[data-slot=avatar]]:![outline:none]",
className
)}
{...props}
/>
)
}
function AvatarGroupCount({ className, ...props }: React.ComponentProps<"span">) {
return (
)
}
export {
Avatar,
AvatarImage,
AvatarFallback,
AvatarBadge,
AvatarGroup,
AvatarGroupCount,
avatarVariants,
}
```
Update the import paths to match your project setup.
## Usage [#usage]
```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
```
```tsx
CL
```
When the name appears beside the avatar, change `alt` to `""` so the image is treated as decorative. Keep the fallback even then — it preserves the layout while the image loads and whenever it fails.
## Don't do this [#dont-do-this]
### Redundant or missing alt text [#redundant-or-missing-alt-text]
```tsx
// Bad — name is already visible beside the avatar
SC
Sarah Chen
```
```tsx
// Good
SC
Sarah Chen
```
With the redundant version, a screen reader announces "Sarah Chen graphic, Avatar of Sarah Chen, Sarah Chen" — the same fact three times for every row in the list. When the name is adjacent, `alt=""` makes the image decorative. When the avatar stands alone, drop the `"Avatar of"` prefix and use plain alt text like `"Sarah Chen"`.
### Status conveyed by a colored dot alone [#status-conveyed-by-a-colored-dot-alone]
```tsx
// Bad
NJ
```
```tsx
// Good
NJ
```
The dot alone fails people who cannot distinguish green from gray, people using forced-colors themes, and screen reader users, who hear nothing at all. Mark the dot `aria-hidden` and put the state in visible text where everyone gets it.
### No fallback behind the image [#no-fallback-behind-the-image]
```tsx
// Bad
```
```tsx
// Good
AR
```
Without a fallback, a deleted file, offline session, or broken CDN link leaves an anonymous empty circle. The fallback costs one line and guarantees the avatar always represents something.
## Examples [#examples]
### Fallback Only [#fallback-only]
```tsx
import { Avatar, AvatarFallback } from "@/components/honest-ui/ui/avatar"
export function AvatarFallbackDemo() {
return (
LT
)
}
```
### Different Sizes [#different-sizes]
```tsx
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/honest-ui/ui/avatar"
export function AvatarSizeDemo() {
return (
AV
AV
AV
)
}
```
### Different Radius [#different-radius]
```tsx
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/honest-ui/ui/avatar"
export function AvatarRadiusDemo() {
return (
AV
AV
AV
)
}
```
### Group Avatars [#group-avatars]
```tsx
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
AvatarImage,
} from "@/components/honest-ui/ui/avatar";
export function AvatarGroupDemo() {
return (
U1
U2
U3
+3
);
}
```
### Group with supporting copy [#group-with-supporting-copy]
The stack plus a short claim reads as social proof without pretending each member approved anything.
```tsx
import {
Avatar,
AvatarFallback,
AvatarGroup,
AvatarImage,
} from "@/components/honest-ui/ui/avatar"
const people = [
{
src: "https://images.unsplash.com/photo-1542595913-85d69b0edbaf?w=96&h=96&dpr=2&q=80",
alt: "Liam Thompson",
fallback: "LT",
},
{
src: "https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?w=96&h=96&dpr=2&q=80",
alt: "Nick Johnson",
fallback: "NJ",
},
{
src: "https://images.unsplash.com/photo-1620075225255-8c2051b6c015?w=96&h=96&dpr=2&q=80",
alt: "Maria Garcia",
fallback: "MG",
},
{
src: "https://github.com/leerob.png",
alt: "@leerob",
fallback: "CH",
},
]
export function AvatarGroupTrust() {
return (
{people.map((person) => (
{person.fallback}
))}
)
}
```
### Status badge with a text equivalent [#status-badge-with-a-text-equivalent]
Every dot is paired with a visible state label; the dots themselves are hidden from assistive technology.
```tsx
import {
Avatar,
AvatarBadge,
AvatarFallback,
AvatarImage,
} from "@/components/honest-ui/ui/avatar";
const people = [
{
src: "https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?w=96&h=96&dpr=2&q=80",
alt: "Nick Johnson",
fallback: "NJ",
badgeClassName: "bg-primary",
status: "Available",
},
{
src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80",
alt: "Alex Johnson",
fallback: "AJ",
badgeClassName: "bg-green-500",
status: "Available",
},
{
src: "https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80",
alt: "Sarah Chen",
fallback: "SC",
badgeClassName: "bg-yellow-500",
status: "Away",
},
{
src: "https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80",
alt: "Michael Rodriguez",
fallback: "MR",
badgeClassName: "bg-destructive",
status: "Do not disturb",
},
];
export function AvatarStatus() {
return (
![]()
` props plus Base UI's `onLoadingStatusChange`; `AvatarFallback` accepts Base UI's `delay` (milliseconds); `AvatarBadge`, `AvatarGroup`, and `AvatarGroupCount` accept native element props and provide layout only.
See the [Base UI Avatar API](https://base-ui.com/react/components/avatar#api-reference).
Nick Johnson
Available
Trusted by 100K+{" "} users.
-
{people.map((person) => (
-
{person.fallback}
))}