kai-avatar
An identity badge for a person or an assistant — a rounded image that falls back to initials when there’s no photo. It’s the face next to a message or in a conversation list, not a generic icon.
- 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 fallback initials render in its place, so the badge is never empty. alt describes the image for assistive tech (it defaults to fallback), and size picks one of three fixed sizes. Every prop is a plain scalar attribute; there’s 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 there’s something to render while the image loads or if it 404s.
Initials fallback
Section titled “Initials fallback”Omit src and the fallback initials show instead — useful for users who haven’t set a photo, or for an assistant identity.
size is a fixed token — sm, md (default), or lg.
| Property | Type | Default | Notes |
|---|---|---|---|
| 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: `sm` | `md` (default) | `lg`. |
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.