Data display
Avatar
An image with an initials fallback. The load state is a `data-state` attribute, so the initials no longer flash before a cached image paints.
data-scope="avatar"
Usage
<Avatar src="/ada.jpg" alt="Ada Lovelace" size="lg" status="online" /><Avatar src="/ada.jpg" alt="Ada Lovelace" size="lg" status="online" /><Avatar src="/ada.jpg" alt="Ada Lovelace" size="lg" status="online" /><ck-avatar src="/ada.jpg" alt="Ada Lovelace" size="lg" status="online" />Props
| Prop | Type | Default | Notes |
|---|---|---|---|
src | string | — | Image URL. |
alt | string | — | Alternative text. |
size | "sm" | "md" | "lg" | "xl" | "md" | Avatar size. |
initials | string | — | Fallback text. Derived from `alt` when omitted. |
status | "online" | "offline" | "busy" | "away" | — | Presence dot. |
squared | boolean | false | Rounded square. |
bordered | boolean | false | Ring around it. |
fallback | ReactNode | — | Custom fallback content. |
Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.