Touch Target

Interactive area sized for touch.

html

<div class="rsp-tt-stage">
  <div class="rsp-tt-col">
    <div class="rsp-tt-frame rsp-tt-frame--guide" style="width:44px; height:44px;">
      <button type="button" class="rsp-tt-btn" style="background:#F5C2E0;">&#10003;</button>
    </div>
    <p>44&times;44px &mdash; meets the minimum</p>
  </div>
  <div class="rsp-tt-col">
    <div class="rsp-tt-frame rsp-tt-frame--guide" style="width:44px; height:44px;">
      <button type="button" class="rsp-tt-btn rsp-tt-btn--small" style="width:24px; height:24px; background:#F5C2E0;">&#10003;</button>
    </div>
    <p>24&times;24px &mdash; too small to tap reliably</p>
  </div>
  <p class="rsp-tt-caption">"Delete" as two hit-target sizes, guide ring shows the 44px reference</p>
</div>
<style>
.rsp-tt-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 11px system-ui, sans-serif; color: #241430aa; display: flex; gap: 20px; flex-wrap: wrap; }
.rsp-tt-col { text-align: center; }
.rsp-tt-frame { display: grid; place-items: center; }
.rsp-tt-frame--guide { outline: 1.5px dashed #24143066; outline-offset: 2px; }
.rsp-tt-btn { border: none; border-radius: 999px; color: #241430; font-weight: 700; cursor: pointer; width: 44px; height: 44px; }
.rsp-tt-btn--small { border-radius: 999px; }
.rsp-tt-col p { margin: 8px 0 0; max-width: 100px; }
.rsp-tt-caption { flex-basis: 100%; margin: 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-[11px] text-[#241430]/70 flex gap-5 flex-wrap">
  <div class="text-center">
    <div class="tw-tt-frame tw-tt-guide grid place-items-center" style="width:44px; height:44px;">
      <button type="button" class="w-11 h-11 rounded-full border-0 text-[#241430] font-bold cursor-pointer" style="background:#F5C2E0;">&#10003;</button>
    </div>
    <p class="mt-2 max-w-[100px]">44&times;44px &mdash; meets the minimum</p>
  </div>
  <div class="text-center">
    <div class="tw-tt-frame tw-tt-guide grid place-items-center" style="width:44px; height:44px;">
      <button type="button" class="rounded-full border-0 text-[#241430] font-bold cursor-pointer" style="width:24px; height:24px; background:#F5C2E0;">&#10003;</button>
    </div>
    <p class="mt-2 max-w-[100px]">24&times;24px &mdash; too small to tap reliably</p>
  </div>
  <p class="basis-full m-0">"Delete" as two hit-target sizes, guide ring shows the 44px reference</p>
</div>
<style>
.tw-tt-guide { outline: 1.5px dashed #24143066; outline-offset: 2px; }
</style>

react

export function TouchTarget({
  undersizedSize = 24,
  showGuide = true,
  label = "Delete",
  accent = "#F5C2E0",
}) {
  const frame = (guide) => ({ display: "grid", placeItems: "center", width: 44, height: 44, outline: guide ? "1.5px dashed #24143066" : "none", outlineOffset: 2 });
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 11, color: "#241430aa", display: "flex", gap: 20, flexWrap: "wrap" }}>
      <div style={{ textAlign: "center" }}>
        <div style={frame(showGuide)}><button type="button" style={{ width: 44, height: 44, borderRadius: 999, border: "none", color: "#241430", fontWeight: 700, cursor: "pointer", background: accent }}>&#10003;</button></div>
        <p style={{ margin: "8px 0 0", maxWidth: 100 }}>44&times;44px &mdash; meets the minimum</p>
      </div>
      <div style={{ textAlign: "center" }}>
        <div style={frame(showGuide)}><button type="button" style={{ width: undersizedSize, height: undersizedSize, borderRadius: 999, border: "none", color: "#241430", fontWeight: 700, cursor: "pointer", background: accent }}>&#10003;</button></div>
        <p style={{ margin: "8px 0 0", maxWidth: 100 }}>{undersizedSize}&times;{undersizedSize}px &mdash; too small to tap reliably</p>
      </div>
      <p style={{ flexBasis: "100%", margin: 0 }}>"{label}" as two hit-target sizes, guide ring shows the 44px reference</p>
    </div>
  );
}