Avatar

Avatar displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.

Key features:

• Automatic fallback: Shows initials when no image URL is provided or image fails to load
• Multiple sizes: Predefined sizes (xs, sm, md, lg) scale with font size, or use custom CSS values for precise control
• Clickable: Supports click events for profile actions, modals, or navigation
• Accessible: Automatically generates appropriate alt text from the name

Behaviors

This component supports the following behaviors:

Properties

name

This property sets the name value the Avatar uses to display initials. If neither this property nor url is defined, an empty avatar is displayed.

<App>
  <Avatar name="John, Doe" />
</App>

<App>
  <Avatar name="John, Doe" />
</App>

size

default: "sm"

This property defines the display size of the Avatar. Predefined sizes (xs, sm, md, lg) scale with the current font size (using em units). Custom CSS values (e.g., '50px', '3rem', '5em') are supported for both width and height, with font-size automatically calculated at approximately 33% of the width for proper initial display.

Available values:

Predefined sizes scale with the current font size:

<App>
  <HStack>
    <Avatar name="Dorothy Ellen Fuller" />
    <Avatar name="Xavier Schiller" size="xs" />
    <Avatar name="Sebastien Moore" size="sm" />
    <Avatar name="Molly Dough" size="md" />
    <Avatar name="Lynn Gilbert" size="lg" />
  </HStack>
</App>

<App>
  <HStack>
    <Avatar name="Dorothy Ellen Fuller" />
    <Avatar name="Xavier Schiller" size="xs" />
    <Avatar name="Sebastien Moore" size="sm" />
    <Avatar name="Molly Dough" size="md" />
    <Avatar name="Lynn Gilbert" size="lg" />
  </HStack>
</App>

Custom CSS values can be used for precise sizing:

<App>
  <HStack verticalAlignment="center">
    <Avatar name="John Doe" size="40px" />
    <Avatar name="Jane Smith" size="60px" />
    <Avatar name="Bob Wilson" size="80px" />
    <Avatar name="Alice Brown" size="6rem" />
  </HStack>
</App>

<App>
  <HStack verticalAlignment="center">
    <Avatar name="John Doe" size="40px" />
    <Avatar name="Jane Smith" size="60px" />
    <Avatar name="Bob Wilson" size="80px" />
    <Avatar name="Alice Brown" size="6rem" />
  </HStack>
</App>

url

This property specifies the URL of the image to display in the Avatar. If neither this property nor name is defined, an empty avatar is displayed.

<App>
  <Avatar url="https://i.pravatar.cc/100" size="md" />
</App>

<App>
  <Avatar url="https://i.pravatar.cc/100" size="md" />
</App>

Events

click

This event is triggered when the Avatar is clicked.

Signature: click(event: MouseEvent): void

• event: The mouse event object.

<App>
  <HStack verticalAlignment="center">
    <Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
    Click the avatar!
  </HStack>
</App>

<App>
  <HStack verticalAlignment="center">
    <Avatar name="Molly Dough" size="md" onClick="toast('Avatar clicked')" />
    Click the avatar!
  </HStack>
</App>

contextMenu

This event is triggered when the Avatar is right-clicked (context menu).

Signature: contextMenu(event: MouseEvent): void

• event: The mouse event object.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables