## Image action button
The compact per-option image control — an image icon button with empty / loading / thumbnail states and a Change/Edit/Delete menu; it emits intents, the host owns the modals.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-image-action-button> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- state: empty | loading | filled, default empty. The control's state — drives which affordance shows
- src: string, default —. The thumbnail image URL when filled
- label: string, default Add image. The empty-state tooltip / aria-label
- disabled: boolean, default false. Non-interactive; grey fill
- add / change / edit / delete: CustomEvent, default —. Composed intents — the host runs the corresponding modal/flow
Tokens: border, border-hover, border-disabled, color-primary, color-error, bg-container, bg-container-disabled, bg-elevated, bg-hover, bg-overlay, text-default, text-inverse, text-disabled, icon-muted, radius-default, radius-sm, radius-pill, ink-a10.
Use when: Image action button (a per-OPTION image cell in an option row); Image dropzone (a standalone MAIN image field where the image IS the field (SETTINGS-44)).