@synapse-ui/avatar

Angular avatar component with image support, initials fallback, five sizes, and an optional online/offline/busy status indicator.

Installation

npm install @synapse-ui/avatar

Usage

import { Avatar } from '@synapse-ui/avatar';

@Component({
  imports: [Avatar],
  template: `
    <synapse-avatar src="/assets/alice.jpg" alt="Alice" size="md" status="online" />
    <synapse-avatar name="Bob Smith" size="lg" />
  `,
})
export class MyComponent {}

Inputs

| Input | Type | Default | Description | | -------- | ---------------------------------------------- | ----------- | ---------------------------------------------- | | src | string \| undefined | undefined | Image URL — shows initials fallback on error | | alt | string | '' | Alt text for the image | | name | string \| undefined | undefined | Used to derive initials when no image is shown | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Avatar diameter | | status | 'online' \| 'offline' \| 'busy' \| undefined | undefined | Status dot indicator |

Running unit tests

Run nx test avatar to execute the unit tests.