Avatar

Usage

import {
  Avatar, AvatarImage, AvatarFallback, AvatarBadge,
} from "@tulipfarm/sprout/avatar";

<Avatar size="lg">
  <AvatarImage src={user.image} alt={user.name} />
  <AvatarFallback>AM</AvatarFallback>
  <AvatarBadge role="img" aria-label="Verified">
    <CheckIcon aria-hidden="true" />
  </AvatarBadge>
</Avatar>

Avatar takes size: "xs", "sm", "default", or "lg". The fallback shows while the image loads, when it fails, and when there is no image. Usedelay on AvatarFallback to avoid a flash on fast networks. The image fades in over 180ms; reduced motion turns this off.

AvatarBadge sits on the bottom edge. Its icon hides at small sizes.AvatarGroup overlaps avatars, and AvatarGroupCount matches their size. Set --sprout-avatar-ring to the surface color behind a group or badge.

Agent avatars

<AgentAvatar agentId={agent.id} name={agent.name} size="sm" />

AgentAvatar picks stable artwork from agentId. The image is decorative; put the agent name in nearby text. Pass src to use your own artwork. agentAvatarSrc(id, baseUrl) returns the default URL.

Entity avatars

<EntityAvatar
  seed={workspace.id}
  name={workspace.name}
  image={workspace.icon}
  size="xs"
  shape="square"
/>

EntityAvatar takes a seed, name, optional image, size up to "xl", and shape ("circle" or "square"). Without an image it shows the first letter on a gradient. The same seed always gives the same gradient. An empty name shows ?.

In conversations

Image upload, file checks, menus, tables, and messages above are sample code. The package only draws the avatar. Your application owns data, uploads, and navigation.

Accessibility

Give AvatarImage real alt text when the avatar is the only name on screen. Use alt="" when a name is next to it. Avatars are not focusable; put them inside a link or button for actions. Give badges and icon counts an accessible label.