Avatar

Avatars with image or initials fallback, a status dot and sizes.

Sizes & status

Sizes & status

Vue

<div class="thl-demo-row">
  <ThlAvatar v-for="(s, i) in ['xs','sm','md','lg','xl']" :key="s" :size="s" :src="avatar(i + 3)" :status="['online','busy','away','offline','online'][i]" />
  <ThlAvatar name="Đỗ Tân" /><ThlAvatar name="Yuki Sato" shape="rounded" /><ThlAvatar name="Li Wei" shape="square" :size="56" />
</div>

React

<Avatar src={url} size="lg" status="online" />
<Avatar name="Đỗ Tân" />                 {/* initials */}
<Avatar name="Yuki Sato" shape="rounded" />
<AvatarGroup>{users.map((u) => <Avatar key={u.id} src={u.avatar} size="sm" />)}</AvatarGroup>

Angular

<thl-avatar [src]="url" size="lg" status="online" />
<thl-avatar name="Đỗ Tân" />
<thl-avatar name="Yuki Sato" shape="rounded" />

API

Avatar

<ThlAvatar> · import { ThlAvatar } from '@thl-ui/vue'

Prop	Type	Default
src	string	—
name	string	—
size	any	—
status	string	—
shape	string	"circle"

AvatarGroup