{
"title": "Avatar",
"description": "Profile picture with graceful fallback to initials or a neutral placeholder.",
"url": "/docs/components/avatar",
"since": "0.2.0",
"tags": [
"display"
],
"platform": "both",
"source": "---\ntitle: Avatar\ndescription: Profile picture with graceful fallback to initials or a neutral placeholder.\nsince: 0.2.0\ntags: [display]\nplatform: both\ncategory: display\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n\n\n## At a glance\n\n- One-liner usage: ``. The image renders when it loads cleanly; otherwise initials derived from `name` take over.\n- Always pass `name` — it doubles as the accessibility label and the source of fallback initials.\n\n## Preview\n\n\n\n## `src`\n\nImage URL. When omitted, or when the image fails to load, the fallback\nrenders instead. The Avatar tracks the load failure internally; you don't\nhave to manage it.\n\n```tsx\n\n```\n\n## `name`\n\nRequired when there is no `src`, and recommended even when there is —\nit's the accessibility label and the source of fallback initials.\nInitials are derived from the first letters of up to two name parts:\n\"Ada Lovelace\" → \"AL\", \"Madonna\" → \"M\".\n\n```tsx\n // initials \"AL\"\n // initials \"M\"\n```\n\n## `size`\n\nVisual diameter. Maps to fixed pixel values that align with the rest\nof the library's compact / standard / generous spacing rhythm.\n\n| Value | Diameter |\n|---------------|----------|\n| `sm` | 32 px |\n| `md` (default)| 40 px |\n| `lg` | 56 px |\n| `xl` | 72 px |\n\n```tsx\n\n```\n\n## `fallback`\n\nOverride the auto-derived initials with custom content — an icon, an\nemoji, or a different string.\n\n```tsx\nimport { User } from 'lucide-react-native';\n\n} />\n\n```\n\n## Props\n\n\n"
}