Edit Unread Indicator

Name

Also known as (comma separated)

Brief definition Shows unread content.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Item label", "default": "Inbox" }, { "id": "count", "type": "number", "label": "Unread count", "default": 5, "min": 0, "max": 99, "step": 1 }, { "id": "style", "type": "select", "label": "Indicator style", "default": "count", "options": [ "dot", "count", "ring" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "bold", "type": "toggle", "label": "Bold label when unread", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"unread unread--{{style}}\">\n <span class=\"unread__mark\" style=\"background:{{accent}};color:{{accent}};\" aria-hidden=\"true\">{{count}}</span>\n <span class=\"unread__label{{#if bold}} unread__label--bold{{/if}}\">{{label}}<span class=\"sr-only\">, {{count}} unread</span></span>\n</div>\n<style>\n.unread { display: inline-flex; align-items: center; gap: 8px; font: 14px system-ui, sans-serif; color: #241430; }\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }\n.unread__mark { display: inline-grid; place-items: center; border-radius: 50%; }\n.unread--dot .unread__mark { width: 8px; height: 8px; font-size: 0; }\n.unread--count .unread__mark { min-width: 20px; height: 20px; padding: 0 5px; color: #241430 !important; font: 700 11px system-ui, sans-serif; }\n.unread--ring .unread__mark { width: 14px; height: 14px; background: transparent !important; border: 2px solid; font-size: 0; }\n.unread__label--bold { font-weight: 700; }\n</style>", "tailwind": "<div class=\"unread-tw unread-tw--{{style}} inline-flex items-center gap-2 font-sans text-sm text-[#241430]\">\n <span aria-hidden=\"true\" class=\"unread-tw__mark inline-grid place-items-center rounded-full\" style=\"background:{{accent}};color:{{accent}}\">{{count}}</span>\n <span class=\"{{#if bold}}font-bold{{/if}}\">{{label}}<span class=\"sr-only\">, {{count}} unread</span></span>\n</div>\n<style>\n.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }\n.unread-tw--dot .unread-tw__mark { width: 8px; height: 8px; font-size: 0; }\n.unread-tw--count .unread-tw__mark { min-width: 20px; height: 20px; padding: 0 5px; color: #241430 !important; font-size: 11px; font-weight: 700; }\n.unread-tw--ring .unread-tw__mark { width: 14px; height: 14px; background: transparent !important; border: 2px solid currentColor; font-size: 0; }\n</style>", "react": "export function UnreadIndicator({\n label = \"{{label}}\",\n count = {{count}},\n style = \"{{style}}\",\n accent = \"{{accent}}\",\n bold = {{bold}},\n}) {\n const markStyle = {\n dot: { width: 8, height: 8, background: accent, fontSize: 0 },\n count: { minWidth: 20, height: 20, padding: \"0 5px\", background: accent, color: \"#241430\", fontSize: 11, fontWeight: 700 },\n ring: { width: 14, height: 14, background: \"transparent\", border: `2px solid ${accent}`, fontSize: 0 },\n }[style];\n return (\n <div style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <span aria-hidden=\"true\" style={{ display: \"inline-grid\", placeItems: \"center\", borderRadius: \"50%\", ...markStyle }}>{count}</span>\n <span style={{ fontWeight: bold ? 700 : 400 }}>\n {label}\n <span style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0,0,0,0)\" }}>, {count} unread</span>\n </span>\n </div>\n );\n}" }