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: From xs (extra small) to lg (large) to fit different contexts
Clickable: Supports click events for profile actions, modals, or navigation
Accessible: Automatically generates appropriate alt text from the name

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>

Example: name

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

`size` (default: "sm")

This property defines the display size of the Avatar.

Available values:

Value	Description
`xs`	Extra small
`sm`	Small (default)
`md`	Medium
`lg`	Large

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

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

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

Example: url

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

Example: click

<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

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-Avatar	$color-surface-100	$color-surface-100
border-Avatar	0px solid $color-surface-400A80	0px solid $color-surface-400A80
borderBottom-Avatar	none	none
borderBottomColor-Avatar	none	none
borderBottomStyle-Avatar	none	none
borderBottomWidth-Avatar	none	none
borderColor-Avatar	none	none
borderEndEndRadius-Avatar	none	none
borderEndStartRadius-Avatar	none	none
borderHorizontal-Avatar	none	none
borderHorizontalColor-Avatar	none	none
borderHorizontalStyle-Avatar	none	none
borderHorizontalWidth-Avatar	none	none
borderLeft-Avatar	none	none
color-Avatar	none	none
borderLeftStyle-Avatar	none	none
borderLeftWidth-Avatar	none	none
borderRadius-Avatar	4px	4px
borderRight-Avatar	none	none
color-Avatar	none	none
borderRightStyle-Avatar	none	none
borderRightWidth-Avatar	none	none
borderStartEndRadius-Avatar	none	none
borderStartStartRadius-Avatar	none	none
borderStyle-Avatar	none	none
borderTop-Avatar	none	none
borderTopColor-Avatar	none	none
borderTopStyle-Avatar	none	none
borderTopWidth-Avatar	none	none
borderHorizontal-Avatar	none	none
borderVerticalColor-Avatar	none	none
borderVerticalStyle-Avatar	none	none
borderVerticalWidth-Avatar	none	none
borderWidth-Avatar	none	none
boxShadow-Avatar	inset 0 0 0 1px rgba(4,32,69,0.1)	inset 0 0 0 1px rgba(4,32,69,0.1)
fontWeight-Avatar	$fontWeight-bold	$fontWeight-bold
textColor-Avatar	$textColor-secondary	$textColor-secondary