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.

circle
square

Types

It supports images, Icons, or characters.

user

Fallback

fallback when image load error.

Fit Container

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

fill
contain
cover
none
scale-down

API

Attributes

NameDescriptionTypeDefault
iconrepresentation type to icon, more info on icon component.string / Component
sizeavatar size.number / enumdefault
shapeavatar shape.enumcircle
srcthe source of the image for an image avatar.string
src-setnative attribute srcset of image avatar.string
altnative attribute alt of image avatar.string
fitset how the image fit its container for an image avatar.enumcover

Events

NameDescriptionType
errortrigger when image load error.Function

Slots

NameDescription
defaultcustomize avatar content.

Source

ComponentStyleDocs

Contributors