Avatar
A circular avatar with image support, initials fallback, and online/offline/busy status indicator.
Import
import { Avatar } from '@synapse-ui/avatar';
Basic Usage
<!-- With image -->
<synapse-avatar src="/user.jpg" alt="Jane Smith" size="md"></synapse-avatar>
<!-- Initials fallback -->
<synapse-avatar name="Jane Smith" status="online"></synapse-avatar>
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
src | string | undefined | — | Image URL |
alt | string | '' | Image alt text |
name | string | undefined | — | Used to derive initials when no image loads |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar diameter |
status | 'online' | 'offline' | 'busy' | undefined | — | Status dot colour |