# Info box
> Generated from info-box.contract.json — do not edit by hand.

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.

Surfaces: editor, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `variant` | information | success | warning | error | `information` | The tone — sets fill, border and leading glyph |
| `icon` | string | `—` | Override the tone's default glyph with a named DS icon |
| `dismissible` | boolean | `false` | Show the ✕ dismiss control |
| `dismiss` | CustomEvent | `—` | Composed event after the box fades out |

## Visual standard (measured)
- Box: padding 12 · radius 8 · 1px tinted border + tinted fill per tone
- Information: #F4F8FF fill · #BFD2FF border · #9BB3E9 glyph (system-info)
- Success: #D8FAEF fill · #16C49A border/glyph (system-check-circle)
- Warning: #FFF5F0 fill · #FF7747 border/glyph (system-warning-circle)
- Error: #FFE3E9 fill · #FF4081 border/glyph — Radical Pink, NOT red (system-x-circle)
- Dismiss: optional ✕ (system-x); fades out on a persistent node, emits `dismiss`
- Text: Plus Jakarta 14/21 #1A1A1A

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

Bespoke, NOT Ant Alert — Alert renders outside the DS theme. Keep callouts rare: most explanation is a ? tooltip or nothing (SETTINGS-28). Use error/warning for a consequence, not decoration.