Display

Avatar

A user or entity image with a fallback. Compound because loading an image is a state machine, not a prop.

Size

Use size to set the avatar, from 24 to 64px.

MHMHMHMHMH

{SIZES.map(size => (
  <Avatar.Root key={size} size={size}>
    <Avatar.Image src={face} alt="" />
    <Avatar.Fallback>MH</Avatar.Fallback>
  </Avatar.Root>
))}

Image

Avatar.Image crops the photo square and the root clips it to a circle, so any aspect ratio works.

MHMHMH

{faces.map(src => (
  <Avatar.Root key={src} size="xl">
    <Avatar.Image src={src} alt="" />
    <Avatar.Fallback>MH</Avatar.Fallback>
  </Avatar.Root>
))}

Fallback

Avatar.Fallback fills the gap until the image decodes, and stays if it never does.

JKMH

<Avatar.Root size="l">
  <Avatar.Image src="/does-not-exist.png" alt="" />
  <Avatar.Fallback delayMs={300}>MH</Avatar.Fallback>
</Avatar.Root>

<Avatar.Root size="l">
  <Avatar.Fallback>JK</Avatar.Fallback>
</Avatar.Root>

<Avatar.Root size="l">
  <Avatar.Fallback>MH</Avatar.Fallback>
</Avatar.Root>

Parts

Import it as a namespace, and the parts work on either side of the server boundary.

import * as Avatar from '@minuk-hwang-design-system/components-react/avatar';

Part	What it is
`Avatar.Root`	The circle. Holds the size, which the fallback reads to scale its text.
`Avatar.Image`	Renders only after the image decodes.
`Avatar.Fallback`	Shown until then, and permanently if the image never loads.

Props

Prop	Type	Default	Notes
`size`	`'xs' \| 's' \| 'm' \| 'l' \| 'xl'`	'm'	24 to 64px. Fallback type scales with it.
`delayMs`	`number`	—	On Fallback. Waits before showing, so a cached image never flashes initials.