Hidden Actions

html

<div class="ha-demo" style="--accent:#E8A020;">
  <span class="ha-demo__badge">{{unless fixed}}&#10007; Anti-pattern: hidden actions

tailwind

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

react

export function HiddenActions({
  actionLabel = "Delete",
  fixed = false,
  menuOpen = true,
  accent = "#E8A020",
}) {
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 13, 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: hidden actions"}
      </span>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 12px", borderRadius: 8, background: "#24143010" }}>
        <span>quarterly-report.pdf</span>
        {fixed
          ? <button type="button" style={{ border: "none", background: accent, borderRadius: 7, padding: "7px 14px", fontWeight: 700, cursor: "pointer" }}>{actionLabel}</button>
          : <button type="button" aria-label="More actions" style={{ border: "none", background: "transparent", fontSize: 18, cursor: "pointer" }}>&#8942;</button>}
      </div>
      {!fixed && menuOpen && (
        <div style={{ marginTop: 6, width: 130, marginLeft: "auto", padding: 6, borderRadius: 8, background: "#FAF7F2", boxShadow: "0 10px 22px rgba(36,20,48,.18)" }}>
          <span style={{ display: "block", padding: "6px 10px", fontSize: 12 }}>Rename</span>
          <span style={{ display: "block", padding: "6px 10px", fontSize: 12 }}>Move</span>
          <span style={{ display: "block", padding: "6px 10px", fontSize: 12, color: accent, fontWeight: 700 }}>{actionLabel}</span>
        </div>
      )}
    </div>
  );
}