AeontelAeontel Docs

Avatar

User avatar with image, fallback, badge, and grouped avatar stack.

Usage

TSX
import { Avatar, AvatarFallback, AvatarImage } from "@aeontel/ui";

<Avatar>
  <AvatarImage src={user.avatarUrl} alt={user.name} />
  <AvatarFallback>{user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
</Avatar>;

Exports

Avatar

User avatar root.

TypeScript
Avatar(props: AvatarPrimitive.Root.Props & { size?: "default" | "sm" | "lg"; }): JSX.Element

Props

PropTypeDefaultDescription
size?"default" | "sm" | "lg" | undefined"default"

AvatarImage

Image element of the avatar.

TypeScript
AvatarImage(props: AvatarPrimitive.Image.Props): JSX.Element

AvatarFallback

Fallback shown when the image fails to load.

TypeScript
AvatarFallback(props: AvatarPrimitive.Fallback.Props): JSX.Element

AvatarBadge

Small status badge attached to the avatar.

TypeScript
AvatarBadge(props: React.ComponentProps<"span">): JSX.Element

AvatarGroup

Stack of overlapping avatars.

TypeScript
AvatarGroup(props: React.ComponentProps<"div">): JSX.Element

AvatarGroupCount

Counter showing remaining avatars in a group.

TypeScript
AvatarGroupCount(props: React.ComponentProps<"div">): JSX.Element