User
A lightweight User component for displaying a user avatar and name. It is used to display users in tables, lists, and other places where user information is needed.
Component
Props
| Props | Default | Type |
|---|---|---|
displayName | 'Test username' | string |
shape | AvatarShape.CIRCLE | AvatarShape |
size | AvatarSize.SM | AvatarSizeAllowed sizes: XS, SM, MD |
isInteractive | false | boolean |
imgUrl | — | string |
Usage
displayName
Provides the desired name for the user. Additionally, it is used by the user's avatar to set the initials, in case the are required if no imgUrl is set.
<template>
<User displayName="John Doe" />
</template>
shape
The shape prop defines the user's avatar container shape. It uses the AvatarShape enum.
<template>
<User :shape="AvatarShape.CIRCLE" />
</template>
Options
| Value | Description |
|---|---|
CIRCLE | Circular shape |
SQUARE | Square shape |
size
The size prop determines the overall dimensions of the user's avatar. It uses the AvatarSize enum.
Allowed sizes: XS, SM, MD
<template>
<User :size="AvatarSize.MD" />
</template>
Options
| Value | Description |
|---|---|
XS | X-small size |
SM | Small size |
MD | Medium size |
avatarSize
The avatarSize sets a custom avatar size and overrides the size settings for the avatar. It uses the AvatarSize enum.
Allowed sizes: XS, SM, MD
<template>
<User
:size="AvatarSize.MD"
:avatarSize="AvatarSize.SM"
/>
</template>
Options
| Value | Description |
|---|---|
XS | X-small size |
SM | Small size |
MD | Medium size |
isInteractive
If true, the avatar becomes interactive (e.g., hover effects, clickable). It is useful when you want to enhance the UX experiencie when linking an user to a specified URL.
<template>
<User :isInteractive="true" />
</template>
imgUrl
The imgUrl prop sets the image source for the user's avatar. If the URL is not provided, invalid or the image fails to load, a fallback (initials) is shown.
<template>
<User imgUrl="https://exampleweb.com/image/20" />
</template>