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, AvatarImage, AvatarFallback } from "@hummingbirdui/react";

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

Sizes

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

JDJDJDJD

tsx

import { Avatar, AvatarImage, AvatarFallback } from "@hummingbirdui/react";

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

Status

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

JDJDJDJD

tsx

import { Avatar, AvatarImage, AvatarFallback } from "@hummingbirdui/react";

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

Fallback

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

tsx

import { Avatar, AvatarImage, AvatarFallback } from "@hummingbirdui/react";

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

Group

AvatarGroup stacks several avatars into an overlapping row.

JDASMK+3

tsx

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
} from "@hummingbirdui/react";

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

API Reference

Avatar, AvatarImage, and AvatarFallback wrap the Radix UI Avatar primitives — see the Radix UI documentation for their props.

Avatar

Prop	Type	Default	Description
size	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Size of the avatar.
status	`"online" \| "offline" \| "away" \| "busy"`	—	Presence indicator shown in the corner.
className	`string`	—	Additional classes merged with the generated classes.

AvatarGroup

Prop	Type	Default	Description
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

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