Default

The avatar component displays the image by default:

<Avatar src="/avatar.webp" alt="Jason Smith" />

<Avatar src="/avatar.webp" alt="Jason Smith" />

Fallback

If the image is not specified or cannot be loaded, the avatar component can fallback and display a textual representation.

<Avatar alt="Jason Smith" />

<Avatar alt="Jason Smith" />

Appearance

Use the appearance attribute to change the avatar shape.

<Avatar alt="Jason Smith" appearance="square" />

<Avatar alt="Jason Smith" appearance="square" />

Size

Use the size attribute and the size enumeration to change the avatar size.

() => (
    <>
        <Avatar src="/avatar.webp" size={AvatarSize.tiny} />
        <Avatar src="/avatar.webp" size={AvatarSize.small} />
        <Avatar src="/avatar.webp" size={AvatarSize.medium} />
        <Avatar src="/avatar.webp" size={AvatarSize.large} />
        <Avatar src="/avatar.webp" size={AvatarSize.xlarge} />
        <Avatar src="/avatar.webp" size={AvatarSize.xxlarge} /> 
    </>
);

() => (
    <>
        <Avatar src="/avatar.webp" size={AvatarSize.tiny} />
        <Avatar src="/avatar.webp" size={AvatarSize.small} />
        <Avatar src="/avatar.webp" size={AvatarSize.medium} />
        <Avatar src="/avatar.webp" size={AvatarSize.large} />
        <Avatar src="/avatar.webp" size={AvatarSize.xlarge} />
        <Avatar src="/avatar.webp" size={AvatarSize.xxlarge} /> 
    </>
);

Use the size attribute to set a custom avatar size.

<Avatar src="/avatar.webp" alt="Jason Smith" size={54} />

<Avatar src="/avatar.webp" alt="Jason Smith" size={54} />