Skip to content
On this page

Avatar

Default

Default variant for avatar is light.

Use color prop to change the avatar color.

A
JD
avatar
Using with AMenu component

If you use AMenu component along with AAvatar then you will use default slot of AAvatar component to show menu. Hence, some of the props will get discarded in favor of default slot usage.

You can refer to list of discarded props when default slot is used in API section.

Fill

You can use variant="fill" to create avatar with filled background.

A
JD
avatar

Outlined

You can use variant="outline" to create outlined avatar.

A
JD
avatar

Sizing

You can use font-size utility to adjust the size of avatar.

Roundness

You can adjust avatar roundness using border-radius utilities.

API

Avatar

color : ColorProp
variant : LayerVariant
states : boolean

Interaction states like hover & active

alt : string

Provide alt attribute for image given by src prop

icon : ConfigurableValue

Icon to render in avatar

content : string

Content to render inside avatar

src : string

Render image using this prop

default : any

Default slot for rendering avatar content. If default slots is used src, alt, icon & content prop usage will be ignored.

Released under the MIT License.