Avatar

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Avatar
  src="src"
  alt="alt"
  initials="WR"
  size="md"
/>

Legacy mount name: data-component="Avatar".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Avatar.wrn

component Avatar {
  props {
    class = ""
    src = ""
    alt = ""
    initials = "WR"
    size = "md"
  }
  view {
        <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500 font-semibold text-white {size === 'sm' ? 'size-8 text-xs' : size === 'lg' ? 'size-14 text-base' : 'size-10 text-sm'} {class}">
        <img data-show="src" src="{src}" alt="{alt}" class="h-full w-full object-cover" />
        <span data-show="!src" aria-hidden="true">{initials}</span>
        </span>
    }
}