HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
AvatarView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorRepresents a person or entity with an image or their initials.StableSince 0.1.0MediaUsageimport'@fusion.dev/helix/avatar'import'@fusion.dev/helix-headless/avatar'Preview
API ReferenceRoothelix-avatarRepresents a person or entity with an image or their initials.
PropTypeDefaultDescriptionnamestring""Name of the person or entity.shape"circle"|"square"Whether the avatar is a circle or a rounded square.size"sm"|"md"|"lg"Edge length of the avatar.srcstring""Image to show.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Replaces the image and initials entirely, for an icon.
EventTypeDescriptionerrorEventRelayed from the image when it fails.loadEventRelayed from the image once it has loaded.
PartDescriptionimageThe image, when one is loading or loaded.initialsThe initials shown when there is no usable image.
CSS PropertyDescription--avatar-background-colorFill behind the initials.--avatar-sizeEdge length of the avatar.
Grouphelix-avatar-groupOverlapping avatars, with a count for the ones not shown.
PropTypeDefaultDescriptionlabelstring""Accessible name for the set, such as "Reviewers".maxnumberHow many avatars are shown before the rest become a count.
ReadTypeDescriptionavatarsHTMLElement[]The avatars, in light-DOM order. Empty on the server, which has no tree.overflownumberHow many avatars are past the limit, and so not shown.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The avatars, in the order they should be read.
PartDescriptionoverflowThe count of avatars past `max`.
CSS PropertyDescription--avatar-group-overlapHow far each avatar sits over the one before it.--avatar-group-ring-colorThe separation drawn between one avatar and the next.
Roothelix-headless-avatarRepresents a person or entity with an image or their initials.
PropTypeDefaultDescriptionnamestring""Name of the person or entity.srcstring""Image to show.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Shown when there is no usable image, in place of the initials.
EventTypeDescriptionerrorEventRelayed from the image when it fails.loadEventRelayed from the image once it has loaded.
PartDescriptionimageThe image, when one is loading or loaded.initialsThe initials shown when there is no usable image.
Grouphelix-headless-avatar-groupOverlapping avatars, with a count for the ones not shown.
PropTypeDefaultDescriptionlabelstring""Accessible name for the set, such as "Reviewers".maxnumberHow many avatars are shown before the rest become a count.
ReadTypeDescriptionavatarsHTMLElement[]The avatars, in light-DOM order. Empty on the server, which has no tree.overflownumberHow many avatars are past the limit, and so not shown.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The avatars, in the order they should be read.
PartDescriptionoverflowThe count of avatars past `max`.
ExamplesNameDescriptionBroken ImageA source that fails, falling back to initials rather than a broken image.EventsThe platform's own two words, relayed because neither crosses a shadow boundary.GroupOverlapped faces with a count for the rest.ImageA photograph, at the three sizes an avatar comes in.PreviewInitials derived from a name, which is the fallback every avatar has.PreviewInitials derived from a name, which is the fallback every avatar has.ShapesThe two shapes at the sizes a person appears at, from a table row to a profile.