Avatar
YhAvatar displays a user or object with an image, icon, or text fallback.
Basic Usage
Display content through src, the icon prop, or the default slot.
Sizes
size supports small, default, large, and custom numeric pixel values.
Shapes
Use shape to switch between circle and square avatars.
Image Fit
fit follows native object-fit semantics for image content inside the avatar.
Custom Background Color
Use background-color, or the compatible color prop, to customize the avatar background.
Error Handling
When the image fails to load, the component emits error, and the default slot becomes the fallback content.
Use in Nuxt
After installing @yh-ui/nuxt, YhAvatar can be used directly. Size, shape, image source, and text fallback render during SSR, while image loading and error fallback continue on the client.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
shape | Avatar shape | 'circle' | 'square' | 'circle' |
size | Avatar size | number | 'large' | 'default' | 'small' | 'default' |
src | Image URL | string | undefined |
src-set | Image srcset | string | undefined |
alt | Image alt text | string | undefined |
fit | Image fit mode | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 'cover' |
icon | Icon component or icon name used when no image is shown | string | Component | undefined |
color | Compatible background color field | string | undefined |
background-color | Background color | string | undefined |
style | Inline custom style | CSSProperties | undefined |
crossorigin | Native image crossorigin attribute | '' | 'anonymous' | 'use-credentials' | 'anonymous' |
theme-overrides | Component-level theme overrides | ComponentThemeVars | undefined |
Events
| Name | Description | Parameters |
|---|---|---|
error | Triggered when the image fails to load | (event: Event) => void |
Slots
| Name | Description |
|---|---|
default | Custom avatar content, such as text or an icon |
Expose
This component does not expose public instance methods or properties.
Type Exports
| Name | Description |
|---|---|
YhAvatarProps | Props type for YhAvatar |
YhAvatarEmits | Emits type for YhAvatar |
YhAvatarSlots | Slots type for YhAvatar |
YhAvatarShape | Shape union type |
YhAvatarSize | Size union type |
YhAvatarFit | Image fit union type |
YhAvatarInstance | Component instance type |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-avatar-bg-color | Avatar background color | var(--yh-color-primary-light-8, #d9ecff) |
--yh-avatar-text-color | Avatar text color | var(--yh-color-primary, #409eff) |
--yh-avatar-radius | Border radius for square avatars | var(--yh-border-radius-base, 4px) |