id: avatar
label: Avatar
family: family-f-data
category: Display
intent: Display user profile image with fallback
description: User avatar image
composable: true
capabilities:
required_parts: []
optional_parts: ["AvatarImage", "AvatarFallback"]
tags: ["avatar", "photo", "profile", "user", "image"]
keywords:
pain: Avatar fallback logic breaks when image fails to load
promise: Image and fallback visibility controlled by state system
why: |
AvatarImage and AvatarFallback use VisibilityState to control rendering. The system ensures fallback is shown when image is unavailable. This avoids manual conditional logic and guarantees consistent behavior.
rules: ["CR-001", "CR-004"]
use_cases: ["user profile", "team lists"]
related: ["icon", "logo", "code_block", "markdown", "chart", "stat", "inline_meta", "kbd", "badge", "carousel"]
file: avatar_ui.css
tokens: avatar-*, size-*, radius-*, font-*
foundation: spacing, size, radius, typography
states: ["loading", "error"]
island: avatar_boundary.rs
pillar: content_display
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift"]
before: |
// ❌ Typical
view! {
<img src="user.png" on:error=move |_| show_fallback() />
}
after: |
// ✅ CanonRS
view! {
<Avatar>
<AvatarImage src="user.png" alt="User" />
<AvatarFallback>"AB"</AvatarFallback>
</Avatar>
}
boundary_type: init
block: []
blocks_primitives: [stack]