Feedback

An interactive feedback control that collects ratings and comments from users. Clicking the trigger opens a popover composed of rating chips, a comment textarea, and a submit button. Distinct from Notice & Banner (/design/components/notice) — Notice displays status messages; Feedback is an interaction control that collects ratings and opinions.

Rating + Comment Popover

A popover opens below the trigger button. Rating chips use lucide icons + text labels (no emoji). The selected chip uses --c-primary solid (dark: --c-sky) + literal #fff (dark: #0A1E33).

Rules

  • Distinct from Notice & Banner — Feedback is a control for collecting ratings and comments. Notice displays success / warning / error messages.
  • The popover must be position: absolute relative to a position: relative parent. Never use position: fixed.
  • No emoji on rating chips — use lucide icons (ThumbsUp / Meh / Frown) with text labels.
  • Selected chip: primary solid + literal #fff. Dark: sky solid + literal #0A1E33.
  • Popover radius --r-xl, shadow --sh-full.
  • Comment is optional. Submit button: primary solid (dark: sky). Button text = literal #fff (dark: sky solid + literal #0A1E33).