Skip to content

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.

Stack::make()->direction(Orientation::Horizontal)->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(),
]);
  • ->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 HopperGH).
  • With neither a source nor a name, the avatar shows a neutral user glyph.

->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);

->shape(AvatarShape $shape) clips the avatar to a circle (the default) or to the theme’s corner radius. Reach for Rounded where the avatar sits among other rounded surfaces — a user menu next to cards and buttons, say — so it does not read as the one round element in the row.

Avatar::make()->name('Ada Lovelace')->shape(AvatarShape::Rounded);