## Info box
A settings-only tinted callout in four tones (information / success / warning / error), optionally dismissible — a bespoke component, not Ant Alert.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-info-box> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- variant: information | success | warning | error, default information. The tone — sets fill, border and leading glyph
- icon: string, default —. Override the tone's default glyph with a named DS icon
- dismissible: boolean, default false. Show the ✕ dismiss control
- dismiss: CustomEvent, default —. Composed event after the box fades out
Tokens: bg-informative, border-info, color-info, bg-positive, border-success, color-success, bg-warning, border-warning, color-warning, pink-20, pink-60, text-default, icon-muted, bg-hover, radius-default, radius-sm.
Use when: Info box (a settings-panel callout explaining a state or a consequence in place); Help text (a one-line must-see consequence attached to a single setting (≤90 chars) — not a box); Tooltip (secondary what/why/how elaboration on a ? glyph).