Edit Read Receipt

Name

Also known as (comma separated)

Brief definition Indicates message has been read.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "state", "type": "select", "label": "Delivery state", "default": "delivered", "options": [ "sent", "delivered", "read" ] }, { "id": "readBy", "type": "text", "label": "Read by", "default": "Priya" }, { "id": "timestamp", "type": "text", "label": "Timestamp label", "default": "10:42" }, { "id": "showAvatar", "type": "toggle", "label": "Show reader avatar", "default": true }, { "id": "accent", "type": "color", "label": "Read tick colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<p class=\"receipt\" data-state=\"{{state}}\" style=\"--accent:{{accent}};\">\n <time class=\"receipt__time\" datetime=\"2026-08-18T10:42:00\">{{timestamp}}</time>\n <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>\n <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>\n <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>\n <span class=\"receipt__status receipt__status--sent\">Sent</span>\n <span class=\"receipt__status receipt__status--delivered\">Delivered</span>\n <span class=\"receipt__status receipt__status--read\">Read by {{readBy}}</span>\n {{#if showAvatar}}<span class=\"receipt__avatar\" aria-hidden=\"true\">{{readBy}}</span>{{/if}}\n</p>\n<style>\n.receipt { display: inline-flex; align-items: center; gap: 6px; font: 12px system-ui, sans-serif; color: #24143099; margin: 0; }\n.receipt__time { color: inherit; }\n.receipt__ticks, .receipt__status { display: none; }\n[data-state=\"sent\"] .receipt__ticks--sent, [data-state=\"sent\"] .receipt__status--sent { display: inline-flex; }\n[data-state=\"delivered\"] .receipt__ticks--delivered, [data-state=\"delivered\"] .receipt__status--delivered { display: inline-flex; }\n[data-state=\"read\"] .receipt__ticks--read, [data-state=\"read\"] .receipt__status--read { display: inline-flex; color: var(--accent); font-weight: 600; }\n.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; }\n</style>", "tailwind": "<p class=\"receipt-tw inline-flex items-center gap-1.5 text-xs text-[#24143099] m-0\" data-state=\"{{state}}\" style=\"--accent:{{accent}}\">\n <time datetime=\"2026-08-18T10:42:00\">{{timestamp}}</time>\n <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>\n <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>\n <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>\n <span class=\"receipt-tw__status receipt-tw__status--sent\">Sent</span>\n <span class=\"receipt-tw__status receipt-tw__status--delivered\">Delivered</span>\n <span class=\"receipt-tw__status receipt-tw__status--read\">Read by {{readBy}}</span>\n {{#if showAvatar}}<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)\">{{readBy}}</span>{{/if}}\n</p>\n<style>\n.receipt-tw__ticks, .receipt-tw__status { display: none; }\n[data-state=\"sent\"] .receipt-tw__ticks--sent, [data-state=\"sent\"] .receipt-tw__status--sent { display: inline-flex; }\n[data-state=\"delivered\"] .receipt-tw__ticks--delivered, [data-state=\"delivered\"] .receipt-tw__status--delivered { display: inline-flex; }\n[data-state=\"read\"] .receipt-tw__ticks--read, [data-state=\"read\"] .receipt-tw__status--read { display: inline-flex; color: var(--accent); font-weight: 600; }\n</style>", "react": "export function ReadReceipt({\n state = \"{{state}}\",\n readBy = \"{{readBy}}\",\n timestamp = \"{{timestamp}}\",\n showAvatar = {{showAvatar}},\n accent = \"{{accent}}\",\n}) {\n const status = { sent: \"Sent\", delivered: \"Delivered\", read: `Read by ${readBy}` }[state];\n const ticks = state === \"sent\" ? 1 : 2;\n const tickColor = state === \"read\" ? accent : \"#24143080\";\n return (\n <p style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, fontSize: 12, color: \"#24143099\", margin: 0 }}>\n <time dateTime=\"2026-08-18T10:42:00\">{timestamp}</time>\n <svg width={ticks === 1 ? 16 : 20} height=\"12\" viewBox={ticks === 1 ? \"0 0 16 12\" : \"0 0 20 12\"} aria-hidden=\"true\">\n <path d=\"M1 6l4 4 4-8\" fill=\"none\" stroke={tickColor} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n {ticks === 2 && <path d=\"M9 6l4 4 4-8\" fill=\"none\" stroke={tickColor} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />}\n </svg>\n <span style={{ color: state === \"read\" ? accent : \"inherit\", fontWeight: state === \"read\" ? 600 : 400 }}>{status}</span>\n {showAvatar && (\n <span aria-hidden=\"true\" style={{ width: 18, height: 18, borderRadius: \"50%\", background: accent, color: \"#241430\",\n fontSize: 9, fontWeight: 700, display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\" }}>{readBy}</span>\n )}\n </p>\n );\n}" }