Avatar
A flexible avatar component that displays either an image or a fallback letter. Includes optional status indicators.
The Avatar component displays a user’s profile image. If the image fails to load or isn’t provided, it
automatically falls back to a letter. It supports various sizes, shapes, colors, and status indicators.
For multiple avatars, see the AvatarList component.
Usage
javascript
1import Avatar from '@/components/atoms/avatar'; 2 3<Avatar src="/avatar1.png" alt="User Image"/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | Image URL |
| alt | string | "" | Image alt text |
| letter | string | - | Letter to display |
| color | string | "gray" | Avatar color (from tailwind.config) |
| borderRadius | string | "full" | The tailwind-friendly rounding for corners (e.g. "md", "full", etc) |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Avatar size |
| border | boolean | true | Whether to show a border |
| status | string | - | A status indicator (e.g. 'online') |
| statusColor | string | "green" | Status color (from tailwind.config) |
| ringColor | string | "gray" | Border color when status is provided (from tailwind.config) |
| onClick | function | - | Click handler |
| className | string | "" | Additional Tailwind classes (overrides defaults if needed) |
| ...props | object | - | Additional props for the image element |
Feel free to customize the status prop any way you like, such as 'online' or 'busy'.
Examples
1. Basic Image Avatar
Simply provide a src and alt prop. Optionally, style with other props.
2. Letter
If you want a letter instead of an image, just provide the letter prop.
If the image is missing or broken, Avatar shows the the letter or the first character of the alt text.
3. Status Indicator
You can add a status indicator to show if the user is online, busy, etc.
Add a ringColor for more emphasis.