Microinteraction

Small interaction providing feedback or accomplishing a focused task.

html

<div class="uif-mic-stage">
  <div class="uif-mic-row">
    <span class="uif-mic-check" style="--accent:#A8E6C1;">
      <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path class="uif-mic-tick" fill="none" stroke="#fff" stroke-width="2" d="M3 8l3 3 7-7"/></svg>
    </span>
    <span class="uif-mic-label">Confirm shipping address</span>
  </div>
  <p class="uif-mic-caption">A microinteraction: one small task, one small acknowledgement</p>
</div>
<style>
.uif-mic-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.uif-mic-row { display: flex; align-items: center; gap: 10px; }
.uif-mic-check { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #24143044; display: grid; place-items: center; flex: none; }
.uif-mic-check--on { background: var(--accent); border-color: var(--accent); }
.uif-mic-tick { opacity: 0; }
.uif-mic-check--on .uif-mic-tick { opacity: 1; }
.uif-mic-label { color: #241430; }
.uif-mic-label--done { text-decoration: line-through; color: #241430aa; }
.uif-mic-caption { margin: 12px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .uif-mic-check { transition: background 260ms ease-out, border-color 260ms ease-out; }
  .uif-mic-tick { transition: opacity 260ms ease-out; }
}
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70">
  <div class="flex items-center gap-2.5">
    <span class="tw-mic-check w-5 h-5 rounded-[5px] border-2 border-[#24143044] grid place-items-center flex-none" style="--accent:#A8E6C1;">
      <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path class="tw-mic-tick" fill="none" stroke="#fff" stroke-width="2" d="M3 8l3 3 7-7"/></svg>
    </span>
    <span class="tw-mic-label text-[#241430]">Confirm shipping address</span>
  </div>
  <p class="mt-3">A microinteraction: one small task, one small acknowledgement</p>
</div>
<style>
.tw-mic-on { background: var(--accent); border-color: var(--accent); }
.tw-mic-tick { opacity: 0; }
.tw-mic-on .tw-mic-tick { opacity: 1; }
.tw-mic-done { text-decoration: line-through; color: #241430aa; }
@media (prefers-reduced-motion: no-preference) {
  .tw-mic-check { transition: background 260ms ease-out, border-color 260ms ease-out; }
  .tw-mic-tick { transition: opacity 260ms ease-out; }
}
</style>

react

export function Microinteraction({
  checked = false,
  duration = 260,
  task = "Confirm shipping address",
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span className="check" style={{ width: 20, height: 20, borderRadius: 5, border: `2px solid ${checked ? accent : "#24143044"}`, background: checked ? accent : "transparent", display: "grid", placeItems: "center", flex: "none" }}>
          <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path style={{ opacity: checked ? 1 : 0 }} fill="none" stroke="#fff" strokeWidth="2" d="M3 8l3 3 7-7" /></svg>
        </span>
        <span style={{ color: "#241430", textDecoration: checked ? "line-through" : "none" }}>{task}</span>
      </div>
      <p style={{ margin: "12px 0 0" }}>A microinteraction: one small task, one small acknowledgement</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .check { transition: background ${duration}ms ease-out, border-color ${duration}ms ease-out; }
          .check svg path { transition: opacity ${duration}ms ease-out; }
        }
      `}</style>
    </div>
  );
}