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) |
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