# CSAT
> Generated from csat.contract.json — do not edit by hand.

The shared thumbs up/down satisfaction prompt — the one CSAT control, not a bespoke rating.

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

Surfaces: editor, dashboard, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `prompt` | string | `—` | Optional question shown before the thumbs |
| `source` | string | `—` | Stable placement token for analytics — passed in the rate and feedback events |
| `value` | up | down | `—` | The current rating (also reflects a click); syncs the selected thumb's aria-pressed |
| `thanks` | string | `—` | Opt-in thank-you line — shown (role=status) after rating (on down, after feedback submit); fades in on a persistent node |
| `feedback-prompt` | string | `What could be better?` | Heading shown at the top of the thumbs-down feedback popover |
| `feedback-placeholder` | string | `Tell us more (optional)` | Placeholder for the free-text field in the feedback popover |

## Visual standard (measured)
- Layout: borderless single row (21px high): 14px #4A4A4A prompt + 16px thumb icons, no chrome — the only layout (legacy `inline` is a no-op)
- Rest: icon #8A8A8A
- Hover: scale 1.12 · icon primary #6A1EBB (motion tokens)
- Selected: icon primary #6A1EBB · aria-pressed synced
- Thumbs-up: rates instantly — reflects value='up', emits `rate`
- Thumbs-down: registers value='down' + emits `rate`, then opens a feedback popover (shared <aha-popover>, role=dialog · Esc/outside-click close) anchored to the down thumb — a prompt, an <aha-counted-textarea> and a primary Send button; dismissing keeps the down rating
- Thank-you: opt-in `thanks` — check + success #16C49A line fades in (motion tokens): instantly on up, after feedback submit on down
- Events: `rate` → { rating: 'up' | 'down', source } · `feedback` → { rating: 'down', source, feedback }

## When to use
- **CSAT** — a lightweight satisfaction check on a feature or a piece of content
- **Result** — a full-block outcome after an operation
- **a Form** — you need structured, multi-field feedback with validation

Use the shared control — never build a bespoke rating. Always pass a stable `source` per placement so segmentation stays typo-proof. Keep it to the binary thumbs; free-text is asked for ONLY after a thumbs-down (the built-in feedback popover), and never block rendering on tracking.