Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or characters.

Basic Usage

Use shape and size prop to set avatar's shape and size.

Types

It supports images, Icons, or characters.

Fallback

fallback when image load error.

Fit Container

Set how the image fit its container for an image avatar, same as object-fit.

Avatar API

Avatar Attributes

NameDescriptionTypeDefaultRequired
iconrepresentation type to icon, more info on icon component.string | ComponentNo
sizeavatar size.number | 'large' | 'default' | 'small''default'No
shapeavatar shape.'circle' | 'square''circle'No
srcthe source of the image for an image avatar.stringNo
src-setnative attribute srcset of image avatar.stringNo
altnative attribute alt of image avatar.stringNo
fitset how the image fit its container for an image avatar.'fill' | 'contain' | 'cover' | 'none' | 'scale-down''cover'No

Avatar Events

NameDescriptionType
errortrigger when image load error.(e: Event) => void

Avatar Slots

NameDescription
defaultcustomize avatar content.

Source

ComponentDocs

Contributors