Tiny Touch Target

html

<div class="tt-demo" style="--accent:#241430;">
  <span class="tt-demo__badge">{{unless fixed}}&#10007; Anti-pattern: tiny touch target (16&times;16px)

tailwind

<div style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <span class="tt-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-3.5">{{unless fixed}}&#10007; Anti-pattern: tiny touch target (16&times;16px)

react

export function TinyTouchTarget({
  fixed = false,
  size = 16,
  accent = "#241430",
}) {
  const labels = [["Edit", "\u270e"], ["Delete", "\u00d7"], ["Share", "\u2191"]];
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 14, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better \u2014 44\u00d744px" : "\u2717 Anti-pattern: tiny touch target (" + size + "\u00d7" + size + "px)"}
      </span>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        {labels.map(([label, glyph]) => (
          <button key={label} type="button" aria-label={label}
            style={fixed
              ? { width: 44, height: 44, border: "none", borderRadius: 10, background: accent, color: "#FAF7F2", fontSize: 16, cursor: "pointer" }
              : { width: size, height: size, border: "none", borderRadius: 3, background: accent, color: "#FAF7F2", fontSize: 9, cursor: "pointer", padding: 0 }}>
            {glyph}
          </button>
        ))}
      </div>
    </div>
  );
}