# Alert
> Generated from alert.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `type` | info | success | warning | error | branding | `info` | Tone + status icon + surface/border tokens |
| `heading` | string | `—` | Optional bold title above the message |
| `size` | regular | small | `regular` | Compact padding + type scale |
| `banner` | boolean | `false` | Full-width, square-cornered edge-to-edge page notice |
| `closable` | boolean | `false` | Shows a dismiss control (✕ chrome) |
| `hide-icon` | boolean | `false` | Suppresses the leading status icon (the showIcon toggle) |
| `slot="action"` | slot | `—` | Trailing action — a button or link |
| `close` | CustomEvent | `—` | Composed event when the banner is dismissed |

## Visual standard (measured)
- Box: flex row, gap 10 · padding 10 14 · radius 8 · 1px tonal border
- Text: Plus Jakarta 14/1.5; heading SemiBold 600
- Info: bg #F4F8FF, border #BFD2FF, icon #9BB3E9
- Success: bg #D8FAEF, border #16C49A, icon/text #13A181
- Warning: bg #FFF5F0, border #FF7747, icon/text #E65B29
- Error: bg #FFF1F0, border #F5222D, icon/text #F5222D
- Branding: bg-accent #F9F5FF, border-focus #D3B4FF, icon/text color-primary #6A1EBB
- Small: padding 6 10 · gap 8 · 13px text · 16px glyph
- Banner: full-width, square (radius 0), border on the bottom edge only
- Action: trailing slot="action" for a button/link
- Icon: status glyph via <aha-icon> (system-info / system-check-circle / system-warning-circle / system-x-circle / system-sparkle)

## When to use
- **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

Keep the message to one or two lines; lead with what happened, then what to do. Reserve error for real failures — over-using red trains people to ignore it.