Avatar

The Avatar component displays an image or text in a flexible, scalable container. It is designed to easily integrate with other components, making it ideal for profile pictures, initials, or symbolic icons.

Example

Basic Avatar

This example demonstrates the basic usage of the Avatar component, displaying a custom background color and a single initial.

import "spatial-design-system/primitives/ar-avatar.js";

<a-ar-avatar
    position="0 1.5 -1"
    size="medium"
    color="#018A6C"
    initial="A"
></a-ar-avatar>

Avatar with Image

This example shows the Avatar component displaying an image. Even though the initial property is set, the image is rendered instead because it has a higher display priority.

import "spatial-design-system/primitives/ar-avatar.js";

<a-ar-avatar
    position="0 1.5 -1"
    size="medium"
    color="#03FCC6"
    initial="B"
    image="/settings.png"
></a-ar-avatar>

Tile Shape Avatar

This example demonstrates the usage of the tile property, which allows the avatar to be displayed as a square rather than the default circular shape. The first avatar uses only the tile property, producing a fully square appearance without any corner rounding. The second avatar additionally uses the rounded property with a medium (md) value, resulting in a tile shape with rounded corners.

import "spatial-design-system/primitives/ar-avatar.js";

<a-ar-avatar
    position="0 1.7 -1"
    size="small"
    color="#168669"
    initial="SP"
    tile="true"
></a-ar-avatar>
<a-ar-avatar
    position="0 1.4 -1"
    size="small"
    color="#11B96C"
    initial="SP"
    tile="true"
    rounded="md"
></a-ar-avatar>

Props

Property	Type	Default	Description
visible	boolean	true	Controls whether the avatar is visible.
position	number[]	0 0 0	Sets the avatar’s position in 3D space.
size	enum (small, medium, large)	medium	Specifies the size of the component.
opacity	number	1	Specifies the opacity of the component.
color	string (blue, #fff)	#00BA92	Defines the background color of the avatar.
textcolor	string	black	Specifies the color of the text displayed within the avatar. If the contrast with the background is insufficient, the text color will not be applied.
text	string	""	Specifies the text to be displayed inside the avatar.
image	string	""	Specifies the image to be displayed inside the avatar.
tile	boolean	false	If true, removes the circular shape and makes the avatar square. Can be used with the rounded property for custom border radius.
rounded	enum (sm, md, lg)	""	Applies rounded corners to the avatar. Uses predefined sizes (sm, md, lg)