# Result
> Generated from result.contract.json — do not edit by hand.

A full-block outcome state — success, error, info, warning, 404, 403 or 500 — with an icon, title and actions.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `status` | success | error | info | warning | 404 | 403 | 500 | `info` | Outcome — picks the glyph and colour |
| `result-title` | string | `—` | The headline message |
| `subtitle` | string | `—` | Optional supporting line under the title |
| `icon` | string (DS icon name) | `—` | Overrides the status glyph with any DS icon (e.g. system-shield-warning) |

## Visual standard (measured)
- Icon: 48px DS glyph, coloured by status (or an `icon` override)
- Success: check-circle · #16C49A
- Error / 500: x-circle / cloud-disconnected · #F5222D
- Warning / 403: warning-circle / lock · #FF7747
- Info / 404: info / magnifying-glass · #9BB3E9
- Title: 24/32 SemiBold #1A1A1A, centred
- Subtitle: 14/21 Regular #8A8A8A

## When to use
- **Result** — a full-block outcome after an operation or a not-found/empty route (with a next action)
- **Alert** — an inline, in-context banner that stays in the layout (feedback pattern)
- **Toast** — a transient, auto-dismissing confirmation

Reserve Result for a whole-region outcome — lead with the glyph + a clear title, keep the subtitle to one line, and give a primary next action in slot="extra". For an in-context message use an Alert; for a transient confirmation use a Toast.