Edit Status Badge

Name

Also known as (comma separated)

Brief definition Label representing state.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Online" }, { "id": "status", "type": "select", "label": "Status", "default": "online", "options": [ "online", "away", "busy", "offline" ] }, { "id": "showDot", "type": "toggle", "label": "Show dot", "default": true }, { "id": "pulsing", "type": "toggle", "label": "Pulsing", "default": false } ]

Templates (JSON object keyed by format) { "html": "<span class=\"status-badge status-badge--{{status}}{{#if pulsing}} status-badge--pulsing{{/if}}\">\n {{#if showDot}}<span class=\"status-badge__dot\" aria-hidden=\"true\"></span>{{/if}}\n {{label}}\n</span>\n<style>\n.status-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px system-ui, sans-serif;\n padding: 4px 10px; border-radius: 999px; box-sizing: border-box; border: 1px solid; }\n.status-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }\n@keyframes status-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }\n@media (prefers-reduced-motion: no-preference) {\n .status-badge--pulsing .status-badge__dot { animation: status-badge-pulse .2s ease-in-out infinite; }\n}\n.status-badge--online { color: #17532F; background: #A8E6C1; border-color: #17532F33; }\n.status-badge--away { color: #4A2E00; background: #E8A020; border-color: #4A2E0033; }\n.status-badge--busy { color: #FAF7F2; background: #B3261E; border-color: #B3261E; }\n.status-badge--offline { color: #24143080; background: #24143014; border-color: #24143022; }\n</style>", "tailwind": "<span class=\"status-badge-tw status-badge-tw--{{status}}{{#if pulsing}} status-badge-tw--pulsing{{/if}} inline-flex items-center gap-1.5 font-semibold text-[12.5px] px-2.5 py-1 rounded-full box-border border\">\n {{#if showDot}}<span aria-hidden=\"true\" class=\"status-badge-tw__dot w-[7px] h-[7px] rounded-full flex-shrink-0\" style=\"background:currentColor\"></span>{{/if}}\n {{label}}\n</span>\n<style>\n@keyframes status-badge-tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }\n@media (prefers-reduced-motion: no-preference) {\n .status-badge-tw--pulsing .status-badge-tw__dot { animation: status-badge-tw-pulse .2s ease-in-out infinite; }\n}\n.status-badge-tw--online { color: #17532F; background: #A8E6C1; border-color: #17532F33; }\n.status-badge-tw--away { color: #4A2E00; background: #E8A020; border-color: #4A2E0033; }\n.status-badge-tw--busy { color: #FAF7F2; background: #B3261E; border-color: #B3261E; }\n.status-badge-tw--offline { color: #24143080; background: #24143014; border-color: #24143022; }\n</style>", "react": "export function StatusBadge({\n label = \"{{label}}\",\n status = \"{{status}}\",\n showDot = {{showDot}},\n pulsing = {{pulsing}},\n}) {\n const palette = {\n online: { color: \"#17532F\", background: \"#A8E6C1\", borderColor: \"#17532F33\" },\n away: { color: \"#4A2E00\", background: \"#E8A020\", borderColor: \"#4A2E0033\" },\n busy: { color: \"#FAF7F2\", background: \"#B3261E\", borderColor: \"#B3261E\" },\n offline: { color: \"#24143080\", background: \"#24143014\", borderColor: \"#24143022\" },\n }[status] ?? {};\n return (\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, fontWeight: 600, fontSize: 12.5,\n padding: \"4px 10px\", borderRadius: 999, boxSizing: \"border-box\", border: \"1px solid\", ...palette }}>\n {showDot && (\n <span aria-hidden=\"true\" className={pulsing ? \"status-badge-react__dot status-badge-react__dot--pulsing\" : \"status-badge-react__dot\"} style={{ width: 7, height: 7, borderRadius: \"50%\", background: \"currentColor\",\n flexShrink: 0 }} />\n )}\n {label}\n <style>{`\n @keyframes status-badge-react-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }\n @media (prefers-reduced-motion: no-preference) {\n .status-badge-react__dot--pulsing { animation: status-badge-react-pulse .2s ease-in-out infinite; }\n }\n `}</style>\n </span>\n );\n}" }