AI Action

Action initiated or recommended by AI.

html

<div class="ai-action ai-action--suggested" style="--accent:#BFD9F2;border-radius:12px;">
  <div class="ai-action__row">
    <span class="ai-action__icon" aria-hidden="true">&#10022;</span>
    <p class="ai-action__label">Archive 12 read newsletters</p>
    <span class="ai-action__badge ai-action__badge--suggested">suggested</span>
  </div>
  <div class="ai-action__footer">
    <button type="button" class="ai-action__btn ai-action__btn--run">Run</button>
    <button type="button" class="ai-action__btn ai-action__btn--undo" >Undo</button>
    <p class="ai-action__hint">Undo available</p>
  </div>
</div>
<style>
.ai-action { font: 15px/1.5 system-ui, sans-serif; max-width: 420px; padding: 16px 18px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143022; box-sizing: border-box; }
.ai-action__row { display: flex; align-items: center; gap: 10px; }
.ai-action__icon { color: var(--accent); font-size: 16px; flex-shrink: 0; }
.ai-action__label { flex: 1; margin: 0; font-weight: 600; font-size: 14px; }
.ai-action__badge { text-transform: capitalize; font-size: 11px; font-weight: 700; padding: .3em .7em; border-radius: 999px; border: 1.5px solid var(--accent); box-sizing: border-box; }
.ai-action__badge--suggested { background: transparent; color: var(--accent); }
.ai-action__badge--applied { background: var(--accent); color: #FAF7F2; }
.ai-action__badge--dismissed { background: transparent; color: #24143066; border-color: #24143033; text-decoration: line-through; }
.ai-action__footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ai-action__btn { font: 600 13px system-ui, sans-serif; padding: 7px 14px; border-radius: 8px; border: 1.5px solid var(--accent); background: var(--accent); color: #FAF7F2; cursor: pointer; }
.ai-action__btn--undo { background: transparent; color: var(--accent); }
.ai-action__btn:disabled { opacity: .4; cursor: not-allowed; }
.ai-action__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-action__hint { margin: 0; font-size: 12px; color: #24143099; }
</style>

tailwind

<div class="ai-action-tw ai-action-tw--suggested max-w-md p-4 bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] box-border" style="--accent:#BFD9F2;border-radius:12px;">
  <div class="flex items-center gap-2.5">
    <span class="text-base flex-shrink-0" style="color:var(--accent)" aria-hidden="true">&#10022;</span>
    <p class="flex-1 m-0 font-semibold text-sm">Archive 12 read newsletters</p>
    <span class="ai-action-tw__badge ai-action-tw__badge--suggested capitalize text-[11px] font-bold px-2.5 py-1 rounded-full border-[1.5px] box-border" style="border-color:var(--accent)">suggested</span>
  </div>
  <div class="flex items-center gap-2.5 mt-3 flex-wrap">
    <button type="button" class="font-semibold text-[13px] px-3.5 py-1.5 rounded-lg border-[1.5px] cursor-pointer" style="border-color:var(--accent);background:var(--accent);color:#FAF7F2">Run</button>
    <button type="button" class="font-semibold text-[13px] px-3.5 py-1.5 rounded-lg border-[1.5px] bg-transparent cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed" style="border-color:var(--accent);color:var(--accent)" >Undo</button>
    <p class="m-0 text-xs text-[#24143099]">Undo available</p>
  </div>
</div>
<style>
.ai-action-tw__badge--suggested { background: transparent; color: var(--accent); }
.ai-action-tw__badge--applied { background: var(--accent); color: #FAF7F2; }
.ai-action-tw__badge--dismissed { background: transparent; color: #24143066; border-color: #24143033 !important; text-decoration: line-through; }
</style>

react

export function AiAction({
  label = "Archive 12 read newsletters",
  status = "suggested",
  accent = "#BFD9F2",
  radius = 12,
  reversible = true,
}) {
  const badge = {
    suggested: { background: "transparent", color: accent, borderColor: accent },
    applied: { background: accent, color: "#FAF7F2", borderColor: accent },
    dismissed: { background: "transparent", color: "#24143066", borderColor: "#24143033", textDecoration: "line-through" },
  }[status] ?? {};
  return (
    <div style={{ maxWidth: 420, padding: "16px 18px", background: "#FAF7F2", color: "#241430",
      border: "1.5px solid #24143022", borderRadius: radius, boxSizing: "border-box", fontFamily: "system-ui, sans-serif" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span aria-hidden="true" style={{ color: accent, fontSize: 16, flexShrink: 0 }}>&#10022;</span>
        <p style={{ flex: 1, margin: 0, fontWeight: 600, fontSize: 14 }}>{label}</p>
        <span style={{ textTransform: "capitalize", fontSize: 11, fontWeight: 700, padding: "0.3em 0.7em",
          borderRadius: 999, border: "1.5px solid", boxSizing: "border-box", ...badge }}>{status}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12, flexWrap: "wrap" }}>
        <button type="button" style={{ font: "600 13px system-ui, sans-serif", padding: "7px 14px", borderRadius: 8,
          border: `1.5px solid ${accent}`, background: accent, color: "#FAF7F2", cursor: "pointer" }}>Run</button>
        <button type="button" disabled={!reversible} style={{ font: "600 13px system-ui, sans-serif", padding: "7px 14px",
          borderRadius: 8, border: `1.5px solid ${accent}`, background: "transparent", color: accent,
          cursor: reversible ? "pointer" : "not-allowed", opacity: reversible ? 1 : 0.4 }}>Undo</button>
        {reversible && <p style={{ margin: 0, fontSize: 12, color: "#24143099" }}>Undo available</p>}
      </div>
    </div>
  );
}