#Avatar

Show a user's photo in a circle, with their initials when there's no photo or it fails to load.

#Installation

npx @blotch/dolan add avatar

import { UiAvatar } from '../components/ui/avatar';

This also adds Skeleton, which the avatar shows while the photo loads.

#Usage

import { Component } from '@angular/core';
import { UiAvatar } from '../components/ui/avatar';

@Component({
  selector: 'app-profile-header',
  imports: [UiAvatar],
  template: `<ui-avatar src="https://i.pravatar.cc/150?img=1" fallback="JD" />`,
})
export class ProfileHeader {}

• A pulsing skeleton covers the circle until the photo loads.
• If the photo fails to load, for example when the device is offline, the avatar shows fallback instead.
• src must be a PNG, JPEG, GIF, BMP or WebP image. Lynx's <image> doesn't load SVG files.

#Initials only

Leave out src to show the fallback text on a muted circle. With neither, the circle is empty.

<ui-avatar fallback="JD" />

#Sizes

size sets the diameter. The initials scale with it.

<ui-avatar fallback="SM" size="sm" />
<ui-avatar fallback="MD" />
<ui-avatar fallback="LG" size="lg" />
<ui-avatar fallback="XL" size="xl" />
<ui-avatar fallback="2X" size="2xl" />

The sizes match Tailwind's h-8, h-10, h-14, h-20 and h-28, from sm to 2xl.

#API

#UiAvatar

No outputs.

#Related

• Skeleton: the placeholder shown while the photo loads
• <image>: the element that draws the photo
• Badge: label a user's status next to their avatar