Avatar

The Avatar component represents a user, group (or other entity's) avatar with a small image or initials.

Properties

name

This property sets the name value the Avatar uses to display initials.

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

size (default: "sm")

This property defines the display size of the Avatar.

Available values:

<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>

url

This property specifies the URL of the image to display in the Avatar.

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

Events

click

This event is triggered when the avatar is clicked.

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

Exposed Methods

This component does not expose any methods.

Styling

The Avatar component uses these theme variables to customize its appearance:

• backgroundColor
• borderColor
• color
• fontWeight
• borderRadius
• boxShadow
• borderStyle
• borderWidth

Theme Variables