Avatar
An image element with a fallback for representing the user.
import * as Avatar from '@gentleduck/primitives/avatar'import * as Avatar from '@gentleduck/primitives/avatar'Anatomy
<Avatar.Root>
<Avatar.Image />
<Avatar.Fallback />
</Avatar.Root><Avatar.Root>
<Avatar.Image />
<Avatar.Fallback />
</Avatar.Root>Example
import * as Avatar from '@gentleduck/primitives/avatar'
function UserAvatar() {
return (
<Avatar.Root className="relative flex size-10 shrink-0 overflow-hidden rounded-full">
<Avatar.Image
src="https://github.com/wildduck.png"
alt="@wildduck"
className="aspect-square size-full"
/>
<Avatar.Fallback className="flex size-full items-center justify-center rounded-full bg-muted" delayMs={600}>
WD
</Avatar.Fallback>
</Avatar.Root>
)
}import * as Avatar from '@gentleduck/primitives/avatar'
function UserAvatar() {
return (
<Avatar.Root className="relative flex size-10 shrink-0 overflow-hidden rounded-full">
<Avatar.Image
src="https://github.com/wildduck.png"
alt="@wildduck"
className="aspect-square size-full"
/>
<Avatar.Fallback className="flex size-full items-center justify-center rounded-full bg-muted" delayMs={600}>
WD
</Avatar.Fallback>
</Avatar.Root>
)
}API
Avatar.Root
The root container that manages image loading state. Renders a <span>.
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | -- | Text direction for RTL support |
asChild | boolean | -- | Render as child element |
Avatar.Image
The <img> element. Only renders when the image has successfully loaded.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | -- | Image source URL |
onLoadingStatusChange | (status: ImageLoadingStatus) => void | -- | Called when loading status changes |
asChild | boolean | -- | Render as child element |
ImageLoadingStatus: 'idle' | 'loading' | 'loaded' | 'error'
Avatar.Fallback
Renders when the image is not available. Renders a <span>.
| Prop | Type | Default | Description |
|---|---|---|---|
delayMs | number | -- | Delay in milliseconds before showing the fallback |
asChild | boolean | -- | Render as child element |