Star4
Back to components

Avatar

zyra-avatar

Profile and team visuals that make lists, comments, and user surfaces feel more human and scannable.

Component preview

Explore the available states and the real library behavior for this component.

zyra-avatar Playground

InitialsImageFallback

Avatar component with initials, image support, status indicator and variants

Controls
name
size
variant
shape
src (image)
online
Live Preview mdteal
Generated Code
<zyra-avatar
  name="Arjun Kumar"
  size="md"
  variant="teal"
/>
Sizes 5 sizes
xs
sm
md
lg
xl
Color Variants 5 variants
teal
blue
purple
warm
neutral
Online Status
online
offline
no status
Shapes
circle
square
Image & Fallback auto fallback on error
User Oneimage loads
User Twoimage loads
Broken Imagefallback → initials
initials only
Real World — Team List
Arjun KumarLead Developer
Online
Priya SharmaUI Designer
Online
Rohit VermaBackend Engineer
Offline
Sneha PatelProduct Manager
Online
Dev ZyraQA Engineer
Offline
Avatar Group — Stacked
+3
7 members

Copy-paste example

Drop this into your Angular standalone component and it works out of the box.

avatar.demo.ts
import { Component } from '@angular/core';
import { ZyraAvatar } from 'zyra-ng-ui';

@Component({
  selector: 'app-demo-avatar',
  standalone: true,
  imports: [ZyraAvatar],
  template: `
    <zyra-avatar
      name="Ava Patel"
      size="lg"
      variant="purple"
      [online]="true"
    />
  `,
})
export class DemoAvatarComponent {}

Variants

All the visual modes and states available for this component.

teal

Default accent-teal initials background

blue

Blue initials background

purple

Purple initials background

warm

Warm amber initials background

neutral

Neutral grey initials background

API

All inputs and configuration options for zyra-avatar.

PropTypeDefaultDescription
namestring-Full name used to generate initials and aria-label
srcstring-Image URL; falls back to initials when not provided or broken
size'sm' | 'md' | 'lg' | 'xl''md'Diameter of the avatar
variant'teal' | 'blue' | 'purple' | 'warm' | 'neutral''teal'Background color for initials fallback
onlinebooleanfalseShows a green presence indicator dot

Accessibility

Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.

  • The name prop is used as the accessible aria-label for screen readers
  • Image avatars include a meaningful alt attribute derived from name
  • Presence indicator dot is decorative; status should be conveyed in text elsewhere

Related components

Components that pair well with Avatar in real UI patterns.

BadgeStatus→CardLayout→TooltipOverlays→