Avatar
A visual component for displaying a user’s profile image or initials.
Anatomy
Usage
<script>
import {Avatar} from 'ui-ingredients';
</script>
<Avatar.Root>
<Avatar.Image src="https://i.pravatar.cc/300" alt="" />
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>
API Reference
Root
| Prop | Default | Description |
|---|
id | | string The unique identifier of the machine. |
ids | | {
root?: string;
image?: string;
fallback?: string;
} The ids of the elements in the dialog. Useful for composition. |
onStatusChange | | (details: StatusChangeDetails) => void Functional called when the image loading status changes. |
asChild | | Snippet Render a different element. |
Fallback
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
| Data Attribute | Value |
|---|
data-part | fallback |
data-scope | avatar |
data-state | "hidden" | "visible" |
Image
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
| Data Attribute | Value |
|---|
data-part | image |
data-scope | avatar |
data-state | "visible" | "hidden" |