Avatar

Avatar with image and text fallback examples.

Package: @solidiom/avatar
Version: 0.0.1-next.0
Status: stable

Examples

import * as Avatar from "@solidiom/avatar"

;<Avatar.Root>
  <Avatar.Image src="/avatars/jane-doe.jpg" alt="Photo of Jane Doe" />
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>

With full name fallback

Use the user’s name as fallback content for better identification when the image is unavailable.

;<Avatar.Root>
  <Avatar.Image src="/avatars/jane-doe.jpg" alt="Photo of Jane Doe" />
  <Avatar.Fallback>Jane Doe</Avatar.Fallback>
</Avatar.Root>

Stacked avatars

Combine multiple avatars in a group for team displays or comment threads.

;<div style={{ display: "flex", gap: "8px" }}>
  <Avatar.Root>
    <Avatar.Image src="/users/1.jpg" alt="User 1" />
    <Avatar.Fallback>A</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="/users/2.jpg" alt="User 2" />
    <Avatar.Fallback>B</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="/users/3.jpg" alt="User 3" />
    <Avatar.Fallback>C</Avatar.Fallback>
  </Avatar.Root>
</div>

JDASBK

View source

        export function Root(props: AvatarRootProps) {
  const [imageStatus, setImageStatus] = createSignal<ImageStatus>("loading")

  return (
    <AvatarContext value={{ imageStatus, setImageStatus }}>
      <span class={props.class} {...applySemanticAttrs({ scope: "avatar", part: "root" })}>
        {props.children}
      </span>
    </AvatarContext>
  )
}