FMX Prototype Pipeline

Avatar

Circular avatar with sm (20×20) or md (40×40) size. Initials as fallback.

<Avatar size="sm" initials="AG" />

<Avatar
  size="sm"
  src="https://example.com/avatar.jpg"
  initials="OB"
  showPlaceholder
/>

<Avatar size="sm" initials="M" />

<Avatar size="sm" />

<Avatar size="md" initials="AG" />

<Avatar
  size="md"
  src="https://example.com/avatar.jpg"
  initials="OB"
  showPlaceholder
/>

<Avatar size="md" initials="M" />

<Avatar size="md" />

Props

size:"sm" | "md"= "md"

sm is 20×20, md is 40×40.

src:string

Image URL. Falls back to initials placeholder when omitted.

initials:string= "?"

Text shown when image is missing or showPlaceholder is forced.

showPlaceholder:boolean= false

Force initials placeholder even when src is provided.

alt:string

Accessible alt text for the image / aria-label for initials.

Tokens