## Alert
An inline, contextual feedback banner — info, success, warning, error, or branding — in regular/small sizes, with an optional full-width banner mode and a trailing action.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-alert> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- type: info | success | warning | error | branding, default info. Tone + status icon + surface/border tokens
- heading: string, default —. Optional bold title above the message
- size: regular | small, default regular. Compact padding + type scale
- banner: boolean, default false. Full-width, square-cornered edge-to-edge page notice
- closable: boolean, default false. Shows a dismiss control (✕ chrome)
- hide-icon: boolean, default false. Suppresses the leading status icon (the showIcon toggle)
- slot="action": slot, default —. Trailing action — a button or link
- close: CustomEvent, default —. Composed event when the banner is dismissed
Tokens: bg-informative, border-info, color-info, bg-positive, text-positive, border-success, bg-warning, text-warning, border-warning, bg-negative, text-negative, border-error, bg-accent, border-focus, color-primary, text-default, icon-muted, radius-default.
Use when: Alert (a persistent, inline message tied to a region of the page (a form warning, a page-level notice)); Toast (a brief, transient confirmation of an action that then disappears); Notification (a richer, stacking message with a title + description, often from a background event).