Feedback

System response indicating what happened or what is happening.

html

<div class="uif-fbk-stage">
  <div class="uif-fbk-banner uif-fbk-banner--success" role="status">
    <span class="uif-fbk-dot" style="background:#A8E6C1;"></span>
    <span>Changes saved</span>
  </div>
  <p class="uif-fbk-caption">The system tells the user what happened &mdash; success feedback</p>
</div>
<style>
.uif-fbk-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.uif-fbk-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-weight: 600; color: #241430; }
.uif-fbk-banner--success { background: #A8E6C133; border: 1px solid #A8E6C1; }
.uif-fbk-banner--error { background: #F5C2E033; border: 1px solid #F5C2E0; }
.uif-fbk-banner--neutral { background: #24143011; border: 1px solid #24143022; }
.uif-fbk-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.uif-fbk-caption { margin: 10px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70">
  <div role="status" class="tw-fbk-banner tw-fbk-success flex items-center gap-2 px-3.5 py-2.5 rounded-lg font-semibold text-[#241430]">
    <span class="w-2 h-2 rounded-full flex-none" style="background:#A8E6C1;"></span>
    <span>Changes saved</span>
  </div>
  <p class="mt-2.5">The system tells the user what happened &mdash; success feedback</p>
</div>
<style>
.tw-fbk-success { background: #A8E6C133; border: 1px solid #A8E6C1; }
.tw-fbk-error { background: #F5C2E033; border: 1px solid #F5C2E0; }
.tw-fbk-neutral { background: #24143011; border: 1px solid #24143022; }
</style>

react

export function Feedback({
  status = "success",
  message = "Changes saved",
  showIcon = true,
  accent = "#A8E6C1",
}) {
  const styles = {
    success: { background: "#A8E6C133", border: "1px solid #A8E6C1" },
    error: { background: "#F5C2E033", border: "1px solid #F5C2E0" },
    neutral: { background: "#24143011", border: "1px solid #24143022" },
  }[status];
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      <div role="status" style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", borderRadius: 8, fontWeight: 600, color: "#241430", ...styles }}>
        {showIcon && <span style={{ width: 8, height: 8, borderRadius: 999, flex: "none", background: accent }} />}
        <span>{message}</span>
      </div>
      <p style={{ margin: "10px 0 0" }}>The system tells the user what happened &mdash; {status} feedback</p>
    </div>
  );
}