Avatar | Components

Avatar

A graphical representation of a user's profile image to visually identify them in different contexts.

styleKeys: avatar

UsageAPI

To display anything other than a user’s profile picture, e.g. a thumbnail, an image preview, an icon

ReactVanilla

<Avatar src="https://picsum.photos/id/64/72" />

<Avatar src="https://picsum.photos/id/64/72" />

<div class="swan-avatar"></div>

<div class="swan-avatar"></div>

Size

Use size="mini" to reduce the size of the Avatar.

ReactVanilla

<Avatar size="mini" src="https://picsum.photos/id/64/72" />

<Avatar size="mini" src="https://picsum.photos/id/64/72" />

<div class="swan-avatar swan-avatar-mini"></div>

<div class="swan-avatar swan-avatar-mini"></div>

The Avatar image needs an alt attribute of some kind. Refer to Alt Text guidelines.

Avatar

The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
alt	`string \| null`	false	A label to use to describe the avatar to assistive devices.	null
src	`string \| null`	false	URL of the avatar image	null
size	`"standard" \| "mini" \| null`	false	The size variation	null