Avatar
DisplayDisplays a user image, or initials as a fallback.
Playground
Controls
Name used for initials.
Avatar size.
Border radius.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. |
alt | string | — | Image alt text. |
fallback | string | — | Name for initials fallback. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size. |
shape | 'circle' | 'rounded' | 'square' | 'circle' | Shape. |
Examples
Initials
vue
<DsAvatar
fallback="John Doe"
size="md"
/>Large
vue
<DsAvatar
fallback="Alice B"
size="lg"
/>XL Circle
vue
<DsAvatar
fallback="TS"
size="xl"
shape="circle"
/>Square
vue
<DsAvatar
fallback="AX"
size="md"
shape="square"
/>Rounded
vue
<DsAvatar
fallback="KB"
size="md"
shape="rounded"
/>Skeleton
Use DsAvatarSkeleton as a loading placeholder while content is being fetched.
Default
vue
<DsAvatarSkeleton />Large
vue
<DsAvatarSkeleton size="lg" />Square
vue
<DsAvatarSkeleton shape="square" />Accessibility
- Provide meaningful alt text when src is used.
- Initials fallback is aria-hidden.