Ambiguous Icon

html

<div class="ai-demo">
  <span class="ai-demo__badge">{{unless fixed}}&#10007; Anti-pattern: ambiguous icon

tailwind

<div style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <span class="ai-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: ambiguous icon

react

export function AmbiguousIcon({
  action = "Archive",
  fixed = false,
  accent = "#241430",
  size = 40,
}) {
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: ambiguous icon"}
      </span>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <button type="button" style={{ width: size, height: size, border: "none", borderRadius: 8, display: "grid", placeItems: "center", cursor: "pointer", background: accent }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FAF7F2" strokeWidth="2" aria-hidden="true"><circle cx="12" cy="12" r="9" /></svg>
        </button>
        {fixed && <span style={{ fontWeight: 600 }}>{action}</span>}
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{fixed ? "icon paired with a visible text label \u2014 no guessing" : "a plain circle could mean anything: read, mute, select, status\u2026"}</p>
    </div>
  );
}