AI Recommendation

AI-generated suggested decision/action.

Switch to annual billing

medium impact

Usage has been steady for 4 months and the annual plan saves 18% at this volume.

html

<div class="ai-recommendation" style="--accent:#E8A020;">
  <div class="ai-recommendation__header">
    <h3 class="ai-recommendation__title">Switch to annual billing</h3>
    <span class="ai-recommendation__badge ai-recommendation__badge--medium">medium impact</span>
  </div>
  <p class="ai-recommendation__rationale">Usage has been steady for 4 months and the annual plan saves 18% at this volume.</p>
  <div class="ai-recommendation__actions">
    <button type="button" class="ai-recommendation__btn ai-recommendation__btn--accept">Accept</button>
    <button type="button" class="ai-recommendation__btn ai-recommendation__btn--reject">Reject</button>
  </div>
</div>
<style>
.ai-recommendation { font: 14px/1.5 system-ui, sans-serif; max-width: 380px; padding: 16px 18px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143022; border-radius: 12px; box-sizing: border-box; }
.ai-recommendation__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ai-recommendation__title { margin: 0; font-size: 15px; font-weight: 700; }
.ai-recommendation__badge { flex-shrink: 0; text-transform: capitalize; font-size: 11px; font-weight: 700; padding: .3em .7em; border-radius: 999px; white-space: nowrap; }
.ai-recommendation__badge--low { background: transparent; color: #24143099; border: 1.5px solid #24143033; }
.ai-recommendation__badge--medium { background: color-mix(in srgb, var(--accent) 25%, #FAF7F2); color: #241430; border: 1.5px solid var(--accent); }
.ai-recommendation__badge--high { background: var(--accent); color: #241430; border: 1.5px solid var(--accent); }
.ai-recommendation__rationale { margin: 10px 0 0; font-size: 13px; color: #241430cc; }
.ai-recommendation__actions { display: flex; gap: 8px; margin-top: 14px; }
.ai-recommendation__btn { font: 600 13px system-ui, sans-serif; padding: 7px 16px; border-radius: 8px; cursor: pointer; }
.ai-recommendation__btn--accept { border: 1.5px solid var(--accent); background: var(--accent); color: #241430; }
.ai-recommendation__btn--reject { border: 1.5px solid #24143033; background: transparent; color: #241430; }
.ai-recommendation__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

tailwind

<div class="max-w-sm p-4 bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] rounded-xl box-border" style="--accent:#E8A020;">
  <div class="flex items-start justify-between gap-2.5">
    <h3 class="m-0 text-[15px] font-bold">Switch to annual billing</h3>
    <span class="ai-recommendation-tw__badge ai-recommendation-tw__badge--medium flex-shrink-0 capitalize text-[11px] font-bold px-2.5 py-1 rounded-full whitespace-nowrap">medium impact</span>
  </div>
  <p class="mt-2.5 mb-0 text-[13px] text-[#241430]/80">Usage has been steady for 4 months and the annual plan saves 18% at this volume.</p>
  <div class="flex gap-2 mt-3.5">
    <button type="button" class="font-semibold text-[13px] px-4 py-1.5 rounded-lg cursor-pointer border-[1.5px]" style="border-color:var(--accent);background:var(--accent);color:#241430">Accept</button>
    <button type="button" class="font-semibold text-[13px] px-4 py-1.5 rounded-lg cursor-pointer border-[1.5px] bg-transparent border-[#24143033] text-[#241430]">Reject</button>
  </div>
</div>
<style>
.ai-recommendation-tw__badge--low { background: transparent; color: #24143099; border: 1.5px solid #24143033; }
.ai-recommendation-tw__badge--medium { background: color-mix(in srgb, var(--accent) 25%, #FAF7F2); color: #241430; border: 1.5px solid var(--accent); }
.ai-recommendation-tw__badge--high { background: var(--accent); color: #241430; border: 1.5px solid var(--accent); }
</style>

react

export function AiRecommendation({
  title = "Switch to annual billing",
  rationale = "Usage has been steady for 4 months and the annual plan saves 18% at this volume.",
  impact = "medium",
  accent = "#E8A020",
  showRationale = true,
}) {
  const badge = {
    low: { background: "transparent", color: "#24143099", border: "1.5px solid #24143033" },
    medium: { background: `color-mix(in srgb, ${accent} 25%, #FAF7F2)`, color: "#241430", border: `1.5px solid ${accent}` },
    high: { background: accent, color: "#241430", border: `1.5px solid ${accent}` },
  }[impact] ?? {};
  return (
    <div style={{ maxWidth: 380, padding: "16px 18px", background: "#FAF7F2", color: "#241430",
      border: "1.5px solid #24143022", borderRadius: 12, boxSizing: "border-box", fontFamily: "system-ui, sans-serif" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 10 }}>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>{title}</h3>
        <span style={{ flexShrink: 0, textTransform: "capitalize", fontSize: 11, fontWeight: 700, padding: "0.3em 0.7em",
          borderRadius: 999, whiteSpace: "nowrap", ...badge }}>{impact} impact</span>
      </div>
      {showRationale && <p style={{ margin: "10px 0 0", fontSize: 13, color: "#241430cc" }}>{rationale}</p>}
      <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
        <button type="button" style={{ font: "600 13px system-ui, sans-serif", padding: "7px 16px", borderRadius: 8,
          cursor: "pointer", border: `1.5px solid ${accent}`, background: accent, color: "#241430" }}>Accept</button>
        <button type="button" style={{ font: "600 13px system-ui, sans-serif", padding: "7px 16px", borderRadius: 8,
          cursor: "pointer", border: "1.5px solid #24143033", background: "transparent", color: "#241430" }}>Reject</button>
      </div>
    </div>
  );
}