THEME
MOTION
HAPTIC
SOUND
AVATAR
Square identity marker — image, initials fallback, optional status dot.
Live demo
Import
import { Avatar } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
name | string | — | — | Source for initials fallback. |
src | string | — | — | |
alt | string | — | — | |
size | 'sm'|'md'|'lg' | md | — | |
status | 'online'|'away'|'busy'|'offline' | — | — | |
accent | 'neutral'|'info'|'success'|'warning'|'danger'|'amber'|'pink'|'purple'|'teal'|'grey' | info | — | |
children | ReactNode | — | — | Custom content (icon, emoji). Falls back to initials. |
Examples
initials
<Avatar name="Madhan Raj" accent="teal" />status
<Avatar src="/u.jpg" name="Madhan" status="online" size="lg" />Accessibility
Role: img
- alt or name for image variant
Feedback
| Haptic | none |
| Sound | none |