Avatar
User avatars. Free, MIT · Basics › Labels and tooltips
Installation
npx valyro-cli@latest add avatarnpx shadcn@latest add https://valyro.xyz/r/avatar.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { Avatar } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
src | string | Image URL. When omitted or failing to load, initials (or fallback) are shown instead. | |
name | string | '' | Used for alt text, initials and the fallback color. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Avatar dimensions, from 20px (xs) to 64px (xl). Inside an AvatarGroup, defaults to the group's size. | |
shape | 'circle' | 'square' | 'circle' | Circle, or a square with corners rounded to a quarter of the size. |
status | 'online' | 'offline' | 'busy' | 'away' | Presence dot in the corner; also appended to the accessible name. | |
statusLabel | string | Spoken status text appended to the name, e.g. "en ligne". Defaults to the status value. | |
fallback | ReactNode | Custom fallback (e.g. an icon) instead of initials. |
Related components
- Badge — Status labels and tags
- Tooltip — Hover and focus hints
- Separator — Dividers
- Button — Buttons in every variant
- Icon Button — Icon-only button
- Button Group — Grouped buttons
- Copy to Clipboard — Copy with confirmation
- Skeleton — Loading placeholders
- Spinner — Loading indicator
- Progress Bar — Progress bars
Previous: Badge · Next: Tooltip · All Basics