Avatar

An image element with a text fallback for representing a user or entity.

Default

An avatar renders an image with a fallback for when the image is unavailable.

tsx

import { Avatar } from "@hummingbirdui/react";

export default function AvatarDefault() {
  return (
    <Avatar>
      <Avatar.Image src="https://i.pravatar.cc/150?img=12" alt="User avatar" />
      <Avatar.Fallback>JD</Avatar.Fallback>
    </Avatar>
  );
}

Sizes

The size prop offers four sizes: xs, sm, md (default), and lg.

JDJDJDJD

tsx

import { Avatar } from "@hummingbirdui/react";

export default function AvatarSizes() {
  return (
    <div className="flex items-center justify-center gap-4">
      <Avatar size="xs">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
      <Avatar size="sm">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
      <Avatar size="md">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
      <Avatar size="lg">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
    </div>
  );
}

Status

The status prop adds a presence indicator: online, offline, away, or busy.

JDJDJDJD

tsx

import { Avatar } from "@hummingbirdui/react";

export default function AvatarStatus() {
  return (
    <div className="flex justify-center gap-4">
      <Avatar status="online">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
      <Avatar status="offline">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
      <Avatar status="away">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
      <Avatar status="busy">
        <Avatar.Image
          src="https://i.pravatar.cc/150?img=12"
          alt="User avatar"
        />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
    </div>
  );
}

Fallback

Avatar.Fallback renders when the image is unavailable — typically the user's initials.

tsx

import { Avatar } from "@hummingbirdui/react";

export default function AvatarFallbackExample() {
  return (
    <Avatar>
      <Avatar.Image src="" alt="Jane Doe" />
      <Avatar.Fallback>JD</Avatar.Fallback>
    </Avatar>
  );
}

Group

Avatar.Group stacks several avatars into an overlapping row.

JDASMK+3

tsx

import { Avatar } from "@hummingbirdui/react";

export default function AvatarGroupExample() {
  return (
    <Avatar.Group>
      <Avatar>
        <Avatar.Image src="https://i.pravatar.cc/150?img=12" alt="User one" />
        <Avatar.Fallback>JD</Avatar.Fallback>
      </Avatar>
      <Avatar>
        <Avatar.Image src="https://i.pravatar.cc/150?img=32" alt="User two" />
        <Avatar.Fallback>AS</Avatar.Fallback>
      </Avatar>
      <Avatar>
        <Avatar.Image src="https://i.pravatar.cc/150?img=45" alt="User three" />
        <Avatar.Fallback>MK</Avatar.Fallback>
      </Avatar>
      <Avatar>
        <Avatar.Fallback>+3</Avatar.Fallback>
      </Avatar>
    </Avatar.Group>
  );
}

API Reference

Built on the Radix UI Avatar primitive. Avatar, Avatar.Image, and Avatar.Fallback forward all props to their Radix counterparts; Avatar.Group is a Hummingbird addition.

Avatar

Contains all the parts of an avatar.

Prop	Type	Default
`asChild`	`boolean`	`false`
`size`	`enum`	`"md"`
`status`	`enum`	—
`className`	`string`	—

Avatar.Image

The image to render. By default it will only render when it has loaded.

Prop	Type	Default
`asChild`	`boolean`	`false`
`onLoadingStatusChange`	`function`	—
`className`	`string`	—

Avatar.Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error.

Prop	Type	Default
`asChild`	`boolean`	`false`
`delayMs`	`number`	—
`className`	`string`	—

Avatar.Group

Stacks several avatars into an overlapping row. A Hummingbird addition with no Radix counterpart.

Styling

Hummingbird React avatar is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available avatar classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousAlert NextBadge