Leaf UI
  • English

      • Avatar

      Display a user, team or object avatar.

      Basic usage

      Live previewBasic usage
      basic.tsx
      import { Avatar, Badge } from '@sudden3/leaf-ui';

export function AvatarBasic() {
  return (
    <div className="leaf-demo-row">
      <Avatar size="sm">LF</Avatar>
      <Avatar>LE</Avatar>
      <Avatar size="lg" shape="square">
        UI
      </Avatar>
      <Badge dot>
        <Avatar alt="Unread messages">A</Avatar>
      </Badge>
      <Avatar src="data:image/png;base64,broken" alt="Failed image">
        LF
      </Avatar>
    </div>
  );
}

      Avatar API

      PropertyTypeDefaultDescription
      srcstring—Image source
      altstring—Accessible name
      size'sm' | 'md' | 'lg' | number'md'Preset size or size in pixels
      shape'circle' | 'square''circle'Avatar shape
      iconReactNode—Fallback icon
      childrenReactNode—Text or custom content, also displayed when the image fails
      onError() => void—Called when the image fails

      Types

      Import the exported types when defining props or building item lists.

      import type { AvatarProps } from '@sudden3/leaf-ui';

      Usage notes

      Supply alt to name the avatar. A failed image falls back to children or icon; changing src retries the new image.