Avatar

Display a person or team avatar with image, text, and gradient fallbacks for lists, comments, and member details.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Avatar for a user or team identity. Use AvatarGroup for overlapping participants; compose Avatar with an ordinary list and text for a vertical contact list.

Show an image with src and configure fallback or fallbackText for missing images. Provide a stable fallbackSeed for the same identity.
Use as="badge" for a corner badge or as="avatar-image" to replace the visual. Explicit size takes priority, followed by parent avatar size.

Import

import { Avatar } from '@snowui-design-system/components';

Usage

Avatar with badges

Sizes

API Reference

Property	Type	Default	Example	Description
`src`	`string \| Component`	`—`	`src={ExampleIcon}`	Avatar image URL or icon component.
`size`	`ResourceSize`	`—`	`size={value}`	Avatar size tier: 12, 16, 20, 24, 28, 32, 40, 48, or 80. Explicit size takes priority, followed by parent avatar or general size context; defaults to 16 without context.
`fallback`	`Component`	`—`	`fallback={ExampleIcon}`	Custom avatar component when src is missing or the image fails. Defaults to the built-in Gradient. For an animated avatar, pass GradientMotion; Avatar supplies as="avatar-image", size="100%", radius="inherit", and the resolved stable seed.
`fallbackText`	`string`	`—`	`fallbackText="Example"`	Explicit fallback text when the image is unavailable. Trims surrounding whitespace; nonempty text replaces the default Gradient, but an explicit fallback component still takes priority. Initials are not derived from the name automatically.
`fallbackColor`	`GradientVariant`	`—`	`fallbackColor={value}`	Explicit named artistic color for the default Gradient. Takes priority over fallbackSeed and name fallback.
`fallbackSeed`	`string \| number`	`—`	`fallbackSeed="Example"`	Stable identity seed; user.id is recommended. A deterministic hash maps it to one of six named colors, so the same seed always yields the same color without storing a color field.
`variant`	`AvatarVariant`	`"default"`	`variant={value}`	Default appearance uses the stable identity seed or explicit named Gradient color. Empty-avatar appearance uses a gray background and default user icon.
`gradientMotion`	`boolean`	`false`	`gradientMotion`	Run the four-layer base vector deformation of the default Gradient fallback continuously. When false, Gradient can still run its ripple deformation and multicolor Overlay on hover.
`children`	`Snippet`	`—`	`<Avatar>Content</Avatar>`	Avatar attachments. as="badge" declares a corner badge; as="avatar-image" supplies an external avatar visual that replaces the default fallback layer.
`badgePosition`	`"top" \| "bottom"`	`"top"`	`badgePosition="top"`	Position as="badge" content at the upper or lower right of the avatar. A Dot badge also participates in avatar clipping.