Reaction

Emoji/quick response.

html

<button type="button" class="reaction reaction--active" style="--accent:#A8E6C1;" aria-pressed="true" aria-label="React: 12 people reacted with 👍">
  <span class="reaction__emoji" aria-hidden="true">👍</span>
  <span class="reaction__count">12</span>
</button>
<style>
.reaction { display: inline-flex; align-items: center; gap: 6px; font: 600 13px system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143026; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.reaction--active { background: var(--accent); border-color: var(--accent); }
.reaction:hover { border-color: var(--accent); }
.reaction:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.reaction__emoji { font-size: 15px; line-height: 1; }
.reaction__count { min-width: 1ch; }
</style>

tailwind

<button type="button" aria-pressed="true" aria-label="React: 12 people reacted with 👍" class="reaction-tw reaction-tw--active inline-flex items-center gap-1.5 font-semibold text-[13px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143026] rounded-full px-3 py-1.5 cursor-pointer" style="--accent:#A8E6C1">
  <span aria-hidden="true" class="text-[15px] leading-none">👍</span>
  <span class="min-w-[1ch]">12</span>
</button>
<style>
.reaction-tw--active { background: var(--accent) !important; border-color: var(--accent) !important; }
.reaction-tw:hover { border-color: var(--accent); }
.reaction-tw:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

react

export function Reaction({
  emoji = "👍",
  count = 12,
  reacted = true,
  label = "React",
  accent = "#A8E6C1",
}) {
  return (
    <button type="button" aria-pressed={reacted} aria-label={`${label}: ${count} people reacted with ${emoji}`}
      style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600, color: "#241430",
        background: reacted ? accent : "#FAF7F2", border: `1.5px solid ${reacted ? accent : "#24143026"}`,
        borderRadius: 999, padding: "6px 12px", cursor: "pointer" }}>
      <span aria-hidden="true" style={{ fontSize: 15, lineHeight: 1 }}>{emoji}</span>
      <span style={{ minWidth: "1ch" }}>{count}</span>
    </button>
  );
}