Avatar
Avatar Props
| Name | Type | Default | Description |
|---|---|---|---|
src | string | - | The avatar image URL. |
fallbackSrc | string | - | Backup image URL used when the primary image fails to load. |
name | string | - | User name. Used for initials fallback and accessible labeling. |
alt | string | - | Accessible label. Takes precedence over name. |
size | AvatarSize | 'md' | Avatar size. Named size or numeric pixel value. See the table below for named sizes. |
shape | AvatarShape | 'circle' | Avatar shape: circle, rounded, or square. |
Named sizes
| Name | Pixel value |
|---|---|
xsm | 20px |
sm | 24px |
md | 36px |
lg | 48px |
xl | 128px |
Numeric sizes
The AvatarSize type lists common pixel values for type hints and autocompletion:
16 | 20 | 24 | 32 | 36 | 40 | 48 | 60 | 64 | 72 | 96 | 128 | 144 | 180
The component does not restrict you to these values. Passing any number will still render the avatar at that pixel size.
Avatar Slots
| Name | Description |
|---|---|
default | Custom content that replaces the default person icon. Only used when there is no image and no name. |
status | Status indicator placed at the corner of the avatar, typically an AvatarStatusDot. |
Avatar Events
| Name | Description |
|---|---|
error | Emitted when the primary image fails to load. |
AvatarStatusDot Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | AvatarStatusDotVariant | 'neutral' | Status dot color variant: neutral, info, success, warning, or error. |
Native attributes
The root element is a <span>.
The following are passed to the root element:
- HTML attributes.
aria-*attributes.data-*attributes.class.style.