Skip to main content

​
Overview

Avatar component displays user profile images, initials, or icons with support for badges and various shapes.

​
Import

import { MagaryAvatar } from 'ng-magary';

​
Basic Usage

​
Image Avatar

<magary-avatar
  [image]="'assets/profile.jpg'"
  [alt]="'User profile'">
</magary-avatar>

​
Label Avatar

<magary-avatar
  [label]="'John Doe'">
</magary-avatar>

​
Icon Avatar

<magary-avatar
  [icon]="'user'">
</magary-avatar>

​
Sizes

<magary-avatar
  [label]="'JD'"
  [size]="'xsmall'">
</magary-avatar>

​
Shapes

<magary-avatar
  [label]="'JD'"
  [shape]="'square'">
</magary-avatar>

​
With Badge

<magary-avatar
  [image]="'assets/profile.jpg'"
  [badgeValue]="'5'"
  [badgeSeverity]="'danger'">
</magary-avatar>

​
Badge Severities

<!-- Info badge -->
<magary-avatar
  [label]="'JD'"
  [badgeValue]="'3'"
  [badgeSeverity]="'info'">
</magary-avatar>

<!-- Success badge -->
<magary-avatar
  [label]="'JD'"
  [badgeValue]="'✓'"
  [badgeSeverity]="'success'">
</magary-avatar>

<!-- Warning badge -->
<magary-avatar
  [label]="'JD'"
  [badgeValue]="'!'"
  [badgeSeverity]="'warning'">
</magary-avatar>

​
Clickable Avatar

<magary-avatar
  [image]="'assets/profile.jpg'"
  [clickable]="true"
  (avatarClick)="handleAvatarClick($event)">
</magary-avatar>

​
Loading State

<magary-avatar
  [label]="'JD'"
  [loading]="true">
</magary-avatar>

​
Disabled State

<magary-avatar
  [label]="'JD'"
  [disabled]="true">
</magary-avatar>

​
Input Properties

​
label
string
Text label (displays initials automatically)
​
image
string
Image URL
​
icon
string
Lucide icon name
​
shape
'circle' | 'square'
default:"'square'"
Shape of the avatar
​
size
'xsmall' | 'small' | 'normal' | 'large' | 'xlarge'
default:"'normal'"
Size of the avatar
​
badgeValue
string | number
Value to display in badge
​
badgeSeverity
'info' | 'success' | 'warning' | 'danger'
default:"'danger'"
Severity level of badge
​
alt
string
default:"'Avatar'"
Alt text for image
​
clickable
boolean
default:"false"
Make avatar clickable
​
loading
boolean
default:"false"
Show loading state
​
disabled
boolean
default:"false"
Disable avatar interaction
​
customStyle
Record<string, unknown>
Custom inline styles

​
Output Events

​
avatarClick
EventEmitter<AvatarClickEvent>
Emitted when avatar or badge is clicked

​
Interfaces

interface AvatarClickEvent {
  type: 'avatar' | 'badge';
  data?: {
    label?: string;
    image?: string;
    icon?: string;
    value?: string | number;
    severity?: BadgeSeverity;
  };
}

type AvatarSize = 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge';
type AvatarShape = 'circle' | 'square';
type BadgeSeverity = 'info' | 'success' | 'warning' | 'danger';

​
Features

  • Multiple types: Image, label (initials), or icon
  • Automatic initials: Extracts initials from label
  • Badge support: Notification badges
  • 5 sizes: From xsmall to xlarge
  • 2 shapes: Circle and square
  • Clickable: Optional click handlers
  • Loading state: Visual loading indicator
  • Image fallback: Falls back to label/icon on error

​
Avatar Group Example

<div class="avatar-group">
  <magary-avatar
    [image]="'assets/user1.jpg'"
    [size]="'small'"
    [shape]="'circle'">
  </magary-avatar>
  
  <magary-avatar
    [image]="'assets/user2.jpg'"
    [size]="'small'"
    [shape]="'circle'">
  </magary-avatar>
  
  <magary-avatar
    [label]="'+5'"
    [size]="'small'"
    [shape]="'circle'">
  </magary-avatar>
</div>

​
Accessibility

  • Alt text for images
  • ARIA labels
  • Keyboard accessible when clickable
  • Screen reader support

Build docs developers (and LLMs) love

Get started for freeTalk to us