Avatar
Profile and team visuals that make lists, comments, and user surfaces feel more human and scannable.
API
All inputs and configuration options for zyra-avatar.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | '' | Full name used to generate initials and aria-label |
src | string | '' | Image URL; falls back to initials when not provided or broken |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Diameter of the avatar |
variant | 'teal' | 'blue' | 'purple' | 'warm' | 'neutral' | 'teal' | Background color for initials fallback |
square | boolean | false | Renders as a rounded-corner square instead of a circle |
online | boolean | null | null | Shows a green presence dot (true) or hides it (null/false) |
Tokens
CSS custom properties zyra-avatar reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Teal gradient end--zyra-color-avatar-primary-end | var(--zyra-color-accent-secondary) | End color of the diagonal gradient for the teal (default) variant. |
Blue gradient end--zyra-color-avatar-blue-end | var(--zyra-color-primary) | End color of the diagonal gradient for the blue variant. |
Purple gradient end--zyra-color-avatar-purple-end | var(--zyra-color-accent-secondary) | End color of the diagonal gradient for the purple variant. |
Warm gradient end--zyra-color-avatar-warm-end | var(--zyra-color-danger-foreground) | End color of the diagonal gradient for the warm variant. |
Initials contrast--zyra-color-avatar-contrast | var(--zyra-color-on-brand) | Text color of the initials fallback on any gradient variant. |
Neutral background--zyra-color-surface-inset | var(--zyra-color-bg-surface) | Fill color of the neutral variant (flat, not a gradient). |
Neutral text--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Initials color of the neutral variant. |
Presence ring--zyra-color-background-elevated | var(--zyra-color-bg-panel) | Border color around the presence dot, matching the surface the avatar sits on. |
Online dot--zyra-color-success-foreground | var(--zyra-color-success) | Fill color of the presence dot when online is true. |
Offline dot--zyra-color-foreground-subtle | var(--zyra-color-text-dim) | Fill color of the presence dot when online is explicitly false. |
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