base component

Avatar

Theme-aware, responsive avatar component.

@wrnexus/ui 0.5.018 props0 slots3 events

Usage

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

<Avatar
  src="src"
  alt="alt"
  initials="initials"
  size="md"
  color="primary"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`src`	`string`	Optional	`""`
`alt`	`string`	Optional	`""`
`initials`	`string`	Optional	`""`
`size`	`string`	Optional	`"md"`
`color`	`string`	Optional	`"primary"`
`variant`	`string`	Optional	`"solid"`
`shape`	`string`	Optional	`"circle"`
`status`	`string`	Optional	`""`
`statusLabel`	`string`	Optional	`""`
`statusPosition`	`string`	Optional	`"bottom"`
`badge`	`string`	Optional	`""`
`badgeIcon`	`string`	Optional	`""`
`badgeLabel`	`string`	Optional	`""`
`tooltip`	`string`	Optional	`""`
`name`	`string`	Optional	`""`
`description`	`string`	Optional	`""`
`loading`	`string`	Optional	`"lazy"`
`class`	`string`	Optional	`""`

Slots

This component does not declare a slot.

Events

load
error
click

Source contract

Installed source: components/avatar.wrn

component Avatar {
  props {
    @event load = function
    @event error = function
    @event click = function
    src = ""
    alt = ""
    initials = ""
    size = "md"
    color = "primary"
    variant = "solid"
    shape = "circle"

    status = ""
    statusLabel = ""
    statusPosition = "bottom"

    badge = ""
    badgeIcon = ""
    badgeLabel = ""

    tooltip = ""
    name = ""
    description = ""
    loading = "lazy"
    class = ""
  }

  view {
        <span
      {...attrs}
      class="wire-next wire-next--avatar {description ? 'wire-next--avatar-media' : ''} {class}"
      data-wrn-avatar
    >
        <span
        class="wire-next__avatar-wrap"
        data-shape="{shape}"
        data-size="{size}"
        data-color="{color}"
        data-variant="{variant}"
        data-status-position="{statusPosition}"
        tabindex="{tooltip ? '0' : '-1'}"
        aria-label="{tooltip || name || alt || initials || 'Avatar'}"
      >
        <span class="wire-next__avatar">
          {#if src}
            <img src="{src}" alt="{alt || name}" loading="{loading}" />
          {:else if initials}
            <span class="wire-next__avatar-initials" aria-hidden="true">{initials}</span>
          {:else}
            <span class="wire-next__avatar-placeholder icon-[lucide--user-round]" aria-hidden="true">
        </span>
          {/if}
        </span>

        {#if status}
          <span
            class="wire-next__avatar-status"
            data-status="{status}"
            title="{statusLabel || status}"
            aria-label="{statusLabel || status}"
          >
        </span>
        {/if}

        {#if badgeIcon}
          <span class="wire-next__avatar-badge" aria-label="{badgeLabel || 'Linked account'}">
        <span class="{badgeIcon}" aria-hidden="true">
        </span>
        </span>
        {:else if badge}
          <span class="wire-next__avatar-badge wire-next__avatar-badge--text" aria-label="{badgeLabel || badge}">
            {badge}
          </span>
        {/if}

        {#if tooltip}
          <span class="wire-next__avatar-tooltip" role="tooltip">{tooltip}</span>
        {/if}
      </span>

      {#if description}
        <span class="wire-next__avatar-copy">
        <strong>{name || alt || initials}</strong>
        <span>{description}</span>
        </span>
      {/if}
    </span>
    }
}