Skip to main content

Avatar

Show a person or resource image with a fallback while the image loads.

View as MarkdownSource Code

Use Avatar where a person or resource needs a compact identity cue. Supply a meaningful alt for identity images; the fallback remains visible until the image loads.

Basic usage#

import { Avatar } from 'moraine'

export function Example() {
  return <Avatar src="/avatar.png" alt="Alex" fallback="A" />
}

Playground#

SC
Props
Slots

Anatomy#

Avatar [component; slot=root; <span>]
├── image [slot]
├── fallback [slot]
│   └── fallbackContent [slot]
└── badge [slot]

Usage#

Image fallbacks#

Provide useful alt text for an image that conveys identity. When the image cannot load, the component can fall back to supplied text or initials; the application remains responsible for choosing an unambiguous accessible name.

Avatar renders the real <img src> during server rendering and uses native image load and error events to switch between image and fallback. Status is loading, loaded, or error.

import { Avatar } from 'moraine'

export function FallbackUsage() {
  return (
    <div class="flex gap-4 items-center">
      <Avatar
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&fit=crop&q=80"
        alt="Sarah Connor"
        text="SC"
      />
      <Avatar src="/invalid-image-path.jpg" alt="Alex Rivera" text="AR" />
      <Avatar alt="Guest User" />
    </div>
  )
}

Loading status#

Use image loading and error callbacks when surrounding UI needs to respond to a changed source status.

import { Avatar, Badge } from 'moraine'
import type { AvatarT } from 'moraine'
import { createSignal } from 'solid-js'

export function LoadingUsage() {
  const [status, setStatus] = createSignal<AvatarT.Status>('loading')

  return (
    <div class="flex gap-4 items-center">
      <Avatar
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&fit=crop&q=80"
        alt="Sarah Connor"
        onStatusChange={setStatus}
      />
      <Badge variant={status() === 'loaded' ? 'subtle' : 'outline'}>Status: {status()}</Badge>
    </div>
  )
}

Examples#

Fallback modes#

import { Avatar } from 'moraine'

export function FallbackModes() {
  return (
    <div class="flex flex-wrap gap-3 items-center">
      <Avatar text="MR" />
      <Avatar alt="Moraine Team" />
      <Avatar fallback="i-lucide-user" />
    </div>
  )
}

Loading status#

import { Avatar } from 'moraine'
import type { AvatarT } from 'moraine'
import { createSignal } from 'solid-js'

export function StatusChange() {
  const [status, setStatus] = createSignal<AvatarT.Status>('loading')

  return (
    <div class="flex gap-3 items-center">
      <Avatar
        src="/avatar-does-not-exist.png"
        alt="Taylor Kim"
        onStatusChange={setStatus}
        fallback="i-lucide-user"
      />
      <p class="text-sm text-muted-foreground">Image status: {status()}</p>
    </div>
  )
}

Badge and group composition#

import { Avatar } from 'moraine'

export function BadgePositions() {
  return (
    <div class="flex flex-wrap gap-3 items-center">
      <Avatar text="A" badge="i-lucide-check" badgePosition="top-left" />
      <Avatar text="B" badge="i-lucide-check" badgePosition="top-right" />
      <Avatar text="C" badge="i-lucide-check" badgePosition="bottom-left" />
      <Avatar text="D" badge="i-lucide-check" badgePosition="bottom-right" />
    </div>
  )
}

Attributes#

Attributes
data-statusSlot: avatar, avatar-image, avatar-fallbackDescription: Stores async loading, loaded, or error status.

Props#

Props for the Avatar component. Renders a <span> element by default.

Prop