Avatar
Displays a user image or fallback initials, commonly used in user interfaces to represent a person or account.
Component
Props
| Props | Default | Type |
|---|---|---|
shape | AvatarShape.CIRCLE | AvatarShape |
size | AvatarSize.SM | AvatarSize | AvatarStackSize |
isInteractive | false | boolean |
displayName | 'Test user' | string |
imgUrl | — | string |
hasBorder | false | boolean |
Usage
shape
The shape prop defines the avatar container shape. It uses the AvatarShape enum.
<template>
<Avatar :shape="AvatarShape.CIRCLE" />
</template>
Options
| Value | Description |
|---|---|
CIRCLE | Circular shape |
SQUARE | Square shape |
size
The size prop determines the overall dimensions of the avatar. It accepts values from both AvatarSize and AvatarStackSize enums.
<template>
<Avatar :size="AvatarShape.LG" />
</template>
Options
| Value | Description |
|---|---|
XS | X-small size |
SM | Small size |
MD | Medium size |
LG | Large size |
XL | Extra Large size |
XXL | 2X-large size |
XXXL | 3X-large size |
XXXL | 4X-large size |
isInteractive
If true, the avatar becomes interactive (e.g., hover effects, clickable). Useful for avatars used as UI controls or navigation elements.
This props only works if isInteractive is true.
<template>
<Avatar :isInteractive="true" />
</template>
displayName
The displayName prop provides an accessible name for the avatar, used as a fallback when the image is not available or for screen readers.
<template>
<Avatar displayName="John Doe" />
</template>
imgUrl
The imgUrl prop sets the image source for the avatar. If the URL is not provided, invalid or the image fails to load, a fallback (initials) is shown.
<template>
<Avatar imgUrl="https://exampleweb.com/image/20" />
</template>
hasBorder
If true, a border is rendered around the avatar, typically used to highlight or visually separate it from the background.
<template>
<Avatar :isInteractive="true" />
</template>