Avatar

Automatically falls back to initials when no image is provided or the image fails to load.

<Avatar name="Ada Lovelace" />

Editable — change the code above and the preview updates live.

Sizes

<div className="ui-flex ui-items-center ui-gap-3">
  <Avatar name="Ada Lovelace" size="sm" />
  <Avatar name="Ada Lovelace" size="md" />
  <Avatar name="Ada Lovelace" size="lg" />
</div>

Editable — change the code above and the preview updates live.

Installation

import { Avatar } from "@labanaat/ui/avatar";

Props

Prop	Type	Default	Description
name	string	—	Used to derive fallback initials and, if no src, the image alt text
src	string	—	Image URL. Falls back to initials if omitted or on load error
size	"sm" \| "md" \| "lg"	"md"	Size scale