## Image
A framed image with rounded corners, a hover preview mask, a loading placeholder and a broken-src fallback.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-image> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, audience.
Props:
- src: string, default —. Image source URL (empty/broken → the fallback state)
- alt: string, default —. Alternative text for the image
- width: number, default —. Frame width in px
- height: number, default —. Frame height in px
- preview: 'true' | 'false', default true. Click-to-zoom modal. `false` → a plain framed picture (no mask, no click, no dialog)
- radius: 'xs'|'sm'|'default'|'lg'|'xl'|'pill', default default. Frame corner from the DS radius scale
- placeholder: boolean, default off. Show a shimmer loading skeleton until the image loads
- fallback: string, default Image unavailable. Label shown in the broken-src error state (its presence never forces the state — a broken/empty src does)
- (default slot): slot, default Preview. The label shown in the hover mask
Tokens: bg-container-secondary, bg-container, bg-container-disabled, bg-hover, radius-xs, radius-sm, radius-default, radius-lg, radius-xl, radius-pill, text-inverse, text-tertiary, icon-muted, icon-strong, bg-overlay, color-primary, font-product.
Use when: Image (a framed picture that invites a click to preview (a deck cover, an upload)); Avatar (a small round identity image); Card (a picture is one part of a larger grouped surface).