Data Display

Avatar

A circular (or square) image or initials, representing a person or entity.

Install

import { Avatar } from 'vael-ui'

src

alt

name

size

shape

badgePlacement

import { Avatar } from 'vael-ui'

<Avatar src="" alt="" name="Ada Lovelace" size="md" shape="circle" badgePlacement="bottom-end">Avatar</Avatar>

Name	Type	Default
`src`	`string \| undefined`
`alt`	`string \| undefined`
`name`	`string \| undefined`
`size`	`"md" \| "sm" \| "lg"`	`"md"`
`shape`	`"circle" \| "square"`	`"circle"`
`badgePlacement`	`"top-start" \| "top-end" \| "bottom-start" \| "bottom-end"`	`"bottom-end"`
`ui`	`Partial<{ root: UiPartValue; image: UiPartValue; fallback: UiPartValue; badge: UiPartValue; }> \| undefined`

Name	Type	Description
`default`	`any`
`badge`	`any`

Name	Type	Description
`load`	`[event: Event]`
`error`	`[event: Event]`

Name	Type	Description
`el`	`HTMLElement \| null`
`imgEl`	`HTMLImageElement \| null`