Avatar

Avatar::make($src?) renders a circular avatar. Pass an image URL to show a photo; when no image is available it falls back to the person’s initials, and with no name at all it shows a neutral user icon.

PHP

Stack::make()->direction('row')->gap(Gap::Small)->schema([
  Avatar::make('https://i.pravatar.cc/96?img=13')->name('Ada Lovelace'),
  Avatar::make()->name('Grace Hopper'),
  Avatar::make()->name('Katherine Johnson')->size(Size::Lg),
  Avatar::make(),
]);

Preview

Tree

• ▾stack
  • align:null
  • direction:"row"
  • float:null
  • gap:"sm"
  • height:null
  • justify:null
  • width:null

  • ▾avatar
    • name:"Ada Lovelace"
    • size:"md"
    • src:"https://i.pravatar.cc/96?img=13"
  • ▾avatar
    • name:"Grace Hopper"
    • size:"md"
    • src:null
  • ▾avatar
    • name:"Katherine Johnson"
    • size:"lg"
    • src:null
  • ▾avatar
    • name:null
    • size:"md"
    • src:null

Style

Source, name, and fallbacks

• ->src($url) sets the image. When present, the image renders and its alt is the name.
• ->name($name) provides the accessible label and the initials fallback — the first letter of the first two words, uppercased (Grace Hopper → GH).
• With neither a source nor a name, the avatar shows a neutral user glyph.

Info

The name is used for both the alt text and the initials, so set it even when you pass an image — it keeps the avatar accessible and gives it something to fall back to if the image fails.

Size

->size(Size $size) scales the avatar. It defaults to Size::Md and accepts any Size from Xs through Xl4.

Avatar::make()->name('Ada Lovelace')->size(Size::Xl);