Skip to content
hypha.solidtype

to chooseto openescto close

Avatar

A person's picture, with a fallback while it loads.

Solidtype_heroui.Avatar is Kobalte’s Image.Root, a <span>, with the classes HeroUI’s own avatarVariants gives. Kobalte renders its image once it has loaded, and its fallback until then or where it cannot, as Radix’s avatar does under HeroUI’s.

Usage

Section titled “Usage”
JDBJR
avatar_usage.mlx
module Avatar = Solidtype_heroui.Avatar


let make () =
  <div class_="flex items-center gap-4">
    <Avatar>
      <Avatar.Image
        alt="John Doe"
        src="https://img.heroui.chat/image/avatar?w=400&h=400&u=3"
      />
      <Avatar.Fallback>"JD"</Avatar.Fallback>
    </Avatar>
    <Avatar>
      <Avatar.Image
        alt="Blue"
        src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
      />
      <Avatar.Fallback>"B"</Avatar.Fallback>
    </Avatar>
    <Avatar><Avatar.Fallback>"JR"</Avatar.Fallback></Avatar>
  </div>

Anatomy

Section titled “Anatomy”
<Avatar>
  <Avatar.Image alt="Ada Lovelace" src="/ada.png" />
  <Avatar.Fallback>"AL"</Avatar.Fallback>
</Avatar>

Examples

Section titled “Examples”

Sizes

Section titled “Sizes”
SMMDLG
avatar_sizes.mlx
module Avatar = Solidtype_heroui.Avatar


let make () =
  <div class_="flex items-center gap-4">
    <Avatar size=`sm>
      <Avatar.Image
        alt="Small Avatar"
        src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
      />
      <Avatar.Fallback>"SM"</Avatar.Fallback>
    </Avatar>
    <Avatar size=`md>
      <Avatar.Image
        alt="Medium Avatar"
        src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/purple.jpg"
      />
      <Avatar.Fallback>"MD"</Avatar.Fallback>
    </Avatar>
    <Avatar size=`lg>
      <Avatar.Image
        alt="Large Avatar"
        src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/red.jpg"
      />
      <Avatar.Fallback>"LG"</Avatar.Fallback>
    </Avatar>
  </div>

Colors

Section titled “Colors”
DFACSCWRDG
avatar_colors.mlx
module Avatar = Solidtype_heroui.Avatar


let make () =
  <div class_="flex items-center gap-4">
    <Avatar color=`default><Avatar.Fallback>"DF"</Avatar.Fallback></Avatar>
    <Avatar color=`accent><Avatar.Fallback>"AC"</Avatar.Fallback></Avatar>
    <Avatar color=`success><Avatar.Fallback>"SC"</Avatar.Fallback></Avatar>
    <Avatar color=`warning><Avatar.Fallback>"WR"</Avatar.Fallback></Avatar>
    <Avatar color=`danger><Avatar.Fallback>"DG"</Avatar.Fallback></Avatar>
  </div>

Variants

Section titled “Variants”
accent
default
success
warning
danger
letter
AG
AG
AG
AG
AG
letter soft
AG
AG
AG
AG
AG
icon
icon soft
img
A
D
S
W
D
avatar_variants.mlx
module Avatar = Solidtype_heroui.Avatar
module Separator = Solidtype_heroui.Separator


let make () =
  <div class_="flex flex-col gap-4">
    <div class_="flex items-center gap-3">
      <div class_="w-24 shrink-0" />
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <span class_="text-xs text-muted capitalize">"accent"</span>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <span class_="text-xs text-muted capitalize">"default"</span>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <span class_="text-xs text-muted capitalize">"success"</span>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <span class_="text-xs text-muted capitalize">"warning"</span>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <span class_="text-xs text-muted capitalize">"danger"</span>
      </div>
    </div>
    <Separator />
    <div class_="flex items-center gap-3">
      <div class_="w-24 shrink-0 text-sm text-muted">"letter"</div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`accent><Avatar.Fallback>"AG"</Avatar.Fallback></Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`default><Avatar.Fallback>"AG"</Avatar.Fallback></Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`success><Avatar.Fallback>"AG"</Avatar.Fallback></Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`warning><Avatar.Fallback>"AG"</Avatar.Fallback></Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`danger><Avatar.Fallback>"AG"</Avatar.Fallback></Avatar>
      </div>
    </div>
    <div class_="flex items-center gap-3">
      <div class_="w-24 shrink-0 text-sm text-muted">"letter soft"</div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`accent variant=`soft>
          <Avatar.Fallback>"AG"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`default variant=`soft>
          <Avatar.Fallback>"AG"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`success variant=`soft>
          <Avatar.Fallback>"AG"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`warning variant=`soft>
          <Avatar.Fallback>"AG"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`danger variant=`soft>
          <Avatar.Fallback>"AG"</Avatar.Fallback>
        </Avatar>
      </div>
    </div>
    <div class_="flex items-center gap-3">
      <div class_="w-24 shrink-0 text-sm text-muted">"icon"</div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`accent>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`default>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`success>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`warning>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`danger>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
    </div>
    <div class_="flex items-center gap-3">
      <div class_="w-24 shrink-0 text-sm text-muted">"icon soft"</div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`accent variant=`soft>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`default variant=`soft>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`success variant=`soft>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`warning variant=`soft>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`danger variant=`soft>
          <Avatar.Fallback><Icons.Person /></Avatar.Fallback>
        </Avatar>
      </div>
    </div>
    <div class_="flex items-center gap-3">
      <div class_="w-24 shrink-0 text-sm text-muted">"img"</div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`accent>
          <Avatar.Image
            alt="Avatar accent"
            src="https://img.heroui.chat/image/avatar?w=400&h=400&u=3"
          />
          <Avatar.Fallback>"A"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`default>
          <Avatar.Image
            alt="Avatar default"
            src="https://img.heroui.chat/image/avatar?w=400&h=400&u=4"
          />
          <Avatar.Fallback>"D"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`success>
          <Avatar.Image
            alt="Avatar success"
            src="https://img.heroui.chat/image/avatar?w=400&h=400&u=5"
          />
          <Avatar.Fallback>"S"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`warning>
          <Avatar.Image
            alt="Avatar warning"
            src="https://img.heroui.chat/image/avatar?w=400&h=400&u=8"
          />
          <Avatar.Fallback>"W"</Avatar.Fallback>
        </Avatar>
      </div>
      <div class_="flex w-20 shrink-0 items-center justify-center">
        <Avatar color=`danger>
          <Avatar.Image
            alt="Avatar danger"
            src="https://img.heroui.chat/image/avatar?w=400&h=400&u=16"
          />
          <Avatar.Fallback>"D"</Avatar.Fallback>
        </Avatar>
      </div>
    </div>
  </div>

Fallback Content

Section titled “Fallback Content”

A fallback’s delay is the avatar’s fallback_delay, in milliseconds, which Kobalte reads on its root, where Radix takes delayMs on the fallback.

JDGB
avatar_fallback.mlx
module Avatar = Solidtype_heroui.Avatar


let make () =
  <div class_="flex items-center gap-4">
    <Avatar><Avatar.Fallback>"JD"</Avatar.Fallback></Avatar>
    <Avatar><Avatar.Fallback><Icons.Person /></Avatar.Fallback></Avatar>
    <Avatar fallback_delay=600.>
      <Avatar.Image
        alt="Delayed Avatar"
        src="https://invalid-url-to-show-fallback.com/image.jpg"
      />
      <Avatar.Fallback>"NA"</Avatar.Fallback>
    </Avatar>
    <Avatar>
      <Avatar.Fallback
        class_="border-none bg-gradient-to-br from-pink-500 to-purple-500 \
                text-white">
        "GB"
      </Avatar.Fallback>
    </Avatar>
  </div>

Not yet

Section titled “Not yet”

HeroUI’s Custom Image Component example renders another image component in place of the <img>, by asChild, which the port does not take.

Customization

Section titled “Customization”

Tailwind CSS

Section titled “Tailwind CSS”

class_ is added after HeroUI’s classes, on the avatar and on each part.

JD
avatar_tailwind.mlx
module Avatar = Solidtype_heroui.Avatar


let make () =
  <Avatar class_="rounded-lg">
    <Avatar.Image
      alt="John Doe" src="https://img.heroui.chat/image/avatar?w=400&h=400&u=3"
    />
    <Avatar.Fallback class_="rounded-lg">"JD"</Avatar.Fallback>
  </Avatar>

Global CSS

Section titled “Global CSS”

HeroUI’s classes are global, so a stylesheet restyles every avatar, as with HeroUI in React:

@layer components {
  .avatar {
    @apply size-16 border-2 border-accent;
  }


  .avatar__fallback {
    @apply bg-gradient-to-br from-purple-500 to-pink-500;
  }
}

Styling Reference

Section titled “Styling Reference”

CSS Classes

Section titled “CSS Classes”
  • .avatar, and its sizes .avatar--sm, .avatar--md, .avatar--lg, and .avatar--soft
  • .avatar__image
  • .avatar__fallback, and its colors .avatar__fallback--default, .avatar__fallback--accent, .avatar__fallback--success, .avatar__fallback--warning, .avatar__fallback--danger

API Reference

Section titled “API Reference”

Each prop beside the name HeroUI’s React component gives it.

Avatar

Section titled “Avatar”
React solidtype Type Default Description
size size [ `sm | `md | `lg ] `md Its size
color color [ `default | `accent | `success | `warning | `danger ] `default Its fallback’s color
variant variant [ `default | `soft ] `default Its look
Avatar.Fallback’s delayMs fallback_delay float Milliseconds before the fallback shows
className class_ string Added after HeroUI’s classes
children children elements Its image and fallback

Avatar.Image

Section titled “Avatar.Image”
React solidtype Type Description
src src string Where the image is
alt alt string What it shows, for a reader that cannot see it
srcSet srcset string Its sources for each width
sizes sizes string Its width at each viewport
crossOrigin crossorigin [ `anonymous | `use_credentials ] How it is fetched across origins
loading loading string "lazy" or "eager"
className class_ string Added after HeroUI’s class
onLoad, onError — Not yet
asChild — Not yet

Avatar.Fallback

Section titled “Avatar.Fallback”
React solidtype Type Description
color color [ `default | `accent | `success | `warning | `danger ] Its color, else the avatar’s
className class_ string Added after HeroUI’s class
children children elements Initials or an icon

Beside React

Section titled “Beside React”

Original HeroUI documentation: Avatar.

The same HeroUI Avatar twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two avatars: a marked row is one they disagree on.

solidtype — OCaml, on Solid and Kobalte
AL
React — TypeScript, on React Aria
attributesolidtypeReact