sheengemologic ui
All components

Avatar

Shows a labeled identity image with a deterministic text fallback.@gemologic/sheen · data

Playground

<Avatar label="Ada Lovelace"  size="md"/>

Variant matrix

Identity fallback
size: sm
size: md
size: lg

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/Avatar.tsx
Tokens
  • --sheen-icon-size-sm
  • --sheen-icon-size-md
  • --sheen-icon-size-lg
  • --sheen-color-bg-inset
  • --sheen-color-fg-muted

Accessibility

Role: imgKeyboard: No component-owned keys

Do

  • Provide the person's or entity's useful accessible name.

Do not

  • Do not repeat a visible adjacent name in the label if that duplication harms the reading flow.

Generated props

NameTypeDefaultDescription
label *string—Required accessible identity label.
srcstring—Optional image URL; load failure reveals the fallback.
fallbackstring—Optional fallback text, otherwise initials are derived from label.
sizeAvatarSizemdToken-sized avatar.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.