Skip to content

Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Basic Usage

Use src prop to set avatar's image source.

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

Types

It supports images, Icons, or characters.

The avatar default mode is bg ,but if set src ,it will automatically change mode to img.

Avatar Group

Use <o-avatar-group> to define avatars.

Fallback

TODO

Fit Container

TODO

Avatar Props

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg'mdAvatar size.
mode'bg' | 'img''bg'Avatar mode.
srcstringundefinedThe source of the image for an image avatar.

Avatar Slots

NameParametersDescription
default()Customize default content

Avatar Group Props

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg'mdAvatar Group size.

MIT Licensed