Avatar

The Avatar component displays an image, icon, 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. Although the default text color of the avatar is black, it is automatically changed to white in this case to ensure sufficient contrast against the selected background color. This guarantees that the text remains readable without requiring manual adjustment.

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 Icon

This example shows the Avatar component displaying an icon. Even though the initial property is set, the icon is rendered instead because it has a higher display priority. If the image property were also provided, the image would take precedence and be displayed instead of both the icon and the initial.

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

<a-ar-avatar
    position="0 1.5 -1"
    size="medium"
    color="#03FCC6"
    initial="B"
    icon="/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"
    initial="SP"
    tile="true"
></a-ar-avatar>
<a-ar-avatar
    position="0 1.4 -1"
    size="small"
    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.
icon	string	""	Specifies the icon 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)