Read Receipt

Indicates message has been read.

Sent Delivered Read by Priya

html

<p class="receipt" data-state="delivered" style="--accent:#BFD9F2;">
  <time class="receipt__time" datetime="2026-08-18T10:42:00">10:42</time>
  <svg class="receipt__ticks receipt__ticks--sent" width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><path d="M1 6l4 4 4-8" fill="none" stroke="#24143080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <svg class="receipt__ticks receipt__ticks--delivered" width="20" height="12" viewBox="0 0 20 12" aria-hidden="true"><path d="M1 6l4 4 4-8" fill="none" stroke="#24143080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 6l4 4 4-8" fill="none" stroke="#24143080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <svg class="receipt__ticks receipt__ticks--read" width="20" height="12" viewBox="0 0 20 12" aria-hidden="true"><path d="M1 6l4 4 4-8" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 6l4 4 4-8" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span class="receipt__status receipt__status--sent">Sent</span>
  <span class="receipt__status receipt__status--delivered">Delivered</span>
  <span class="receipt__status receipt__status--read">Read by Priya</span>
  <span class="receipt__avatar" aria-hidden="true">Priya</span>
</p>
<style>
.receipt { display: inline-flex; align-items: center; gap: 6px; font: 12px system-ui, sans-serif; color: #24143099; margin: 0; }
.receipt__time { color: inherit; }
.receipt__ticks, .receipt__status { display: none; }
[data-state="sent"] .receipt__ticks--sent, [data-state="sent"] .receipt__status--sent { display: inline-flex; }
[data-state="delivered"] .receipt__ticks--delivered, [data-state="delivered"] .receipt__status--delivered { display: inline-flex; }
[data-state="read"] .receipt__ticks--read, [data-state="read"] .receipt__status--read { display: inline-flex; color: var(--accent); font-weight: 600; }
.receipt__avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #241430; font: 700 9px system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; }
</style>

tailwind

<p class="receipt-tw inline-flex items-center gap-1.5 text-xs text-[#24143099] m-0" data-state="delivered" style="--accent:#BFD9F2">
  <time datetime="2026-08-18T10:42:00">10:42</time>
  <svg class="receipt-tw__ticks receipt-tw__ticks--sent" width="16" height="12" viewBox="0 0 16 12" aria-hidden="true"><path d="M1 6l4 4 4-8" fill="none" stroke="#24143080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <svg class="receipt-tw__ticks receipt-tw__ticks--delivered" width="20" height="12" viewBox="0 0 20 12" aria-hidden="true"><path d="M1 6l4 4 4-8" fill="none" stroke="#24143080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 6l4 4 4-8" fill="none" stroke="#24143080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <svg class="receipt-tw__ticks receipt-tw__ticks--read" width="20" height="12" viewBox="0 0 20 12" aria-hidden="true"><path d="M1 6l4 4 4-8" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 6l4 4 4-8" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span class="receipt-tw__status receipt-tw__status--sent">Sent</span>
  <span class="receipt-tw__status receipt-tw__status--delivered">Delivered</span>
  <span class="receipt-tw__status receipt-tw__status--read">Read by Priya</span>
  <span aria-hidden="true" class="w-[18px] h-[18px] rounded-full text-[#241430] text-[9px] font-bold inline-flex items-center justify-center" style="background:var(--accent)">Priya</span>
</p>
<style>
.receipt-tw__ticks, .receipt-tw__status { display: none; }
[data-state="sent"] .receipt-tw__ticks--sent, [data-state="sent"] .receipt-tw__status--sent { display: inline-flex; }
[data-state="delivered"] .receipt-tw__ticks--delivered, [data-state="delivered"] .receipt-tw__status--delivered { display: inline-flex; }
[data-state="read"] .receipt-tw__ticks--read, [data-state="read"] .receipt-tw__status--read { display: inline-flex; color: var(--accent); font-weight: 600; }
</style>

react

export function ReadReceipt({
  state = "delivered",
  readBy = "Priya",
  timestamp = "10:42",
  showAvatar = true,
  accent = "#BFD9F2",
}) {
  const status = { sent: "Sent", delivered: "Delivered", read: `Read by ${readBy}` }[state];
  const ticks = state === "sent" ? 1 : 2;
  const tickColor = state === "read" ? accent : "#24143080";
  return (
    <p style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "#24143099", margin: 0 }}>
      <time dateTime="2026-08-18T10:42:00">{timestamp}</time>
      <svg width={ticks === 1 ? 16 : 20} height="12" viewBox={ticks === 1 ? "0 0 16 12" : "0 0 20 12"} aria-hidden="true">
        <path d="M1 6l4 4 4-8" fill="none" stroke={tickColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        {ticks === 2 && <path d="M9 6l4 4 4-8" fill="none" stroke={tickColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />}
      </svg>
      <span style={{ color: state === "read" ? accent : "inherit", fontWeight: state === "read" ? 600 : 400 }}>{status}</span>
      {showAvatar && (
        <span aria-hidden="true" style={{ width: 18, height: 18, borderRadius: "50%", background: accent, color: "#241430",
          fontSize: 9, fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{readBy}</span>
      )}
    </p>
  );
}