kai-avatar
Shows a person or an assistant consistently, from a photo or their initials.
- Shadow DOM
- Image or initials
- 3 sizes
- Scalar props only
Preview
Section titled “Preview”Set src to an image URL or data-URI and fallback to a short initials string. When src is absent, or the image fails to load, the initials render instead, so the badge is never empty. alt describes the image (it defaults to fallback), and every prop is a plain scalar attribute with no slotted content.
<kai-avatar src="/me.jpg" alt="John Doe" fallback="JD"></kai-avatar><kai-avatar fallback="AI" size="sm"></kai-avatar>Examples
Section titled “Examples”With a src the avatar shows the image cropped to a circle. Keep fallback set so something renders while it loads, or if it 404s.
Initials fallback
Section titled “Initials fallback”Omit src and the fallback initials show instead: a user who hasn’t set a photo, or an assistant identity.
| Property | Type | Default | Notes |
|---|---|---|---|
| theme | "light" | "dark" | "auto" | 'auto' | Color mode (`auto` follows prefers-color-scheme). |
| src | string | — | Image URL/data-URI. When absent, the `fallback` initials show instead. |
| alt | string | — | Alt text for the image. Defaults to `fallback`. |
| fallback | string | '' | Short text shown when there's no image, usually initials (e.g. "JD", "AI"). |
| size | "sm" | "md" | "lg" | 'md' | Size token. |
Composed from
Section titled “Composed from”This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.
Avatar