Edit SLA Indicator

Name

Also known as (comma separated)

Brief definition Shows progress against a service-level target.

Notes **Enterprise Application UI:** Service-level status.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "First response SLA" }, { "id": "percentUsed", "type": "number", "label": "Time used (%)", "default": 70, "min": 0, "max": 100, "step": 1 }, { "id": "status", "type": "select", "label": "Status", "default": "at-risk", "options": [ "on-track", "at-risk", "breached" ] }, { "id": "dueIn", "type": "text", "label": "Due in", "default": "42 minutes" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sla sla--{{status}}\">\n <div class=\"sla__row\">\n <span class=\"sla__label\">{{label}}</span>\n <span class=\"sla__status\">{{status}}</span>\n </div>\n <div class=\"sla__track\" role=\"progressbar\" aria-label=\"{{label}} time used\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"{{percentUsed}}\">\n <div class=\"sla__fill\" style=\"width:{{percentUsed}}%;\"></div>\n </div>\n <p class=\"sla__due\">Due in {{dueIn}}</p>\n</div>\n<style>\n.sla { width: 260px; font: 12.5px/1.3 system-ui, sans-serif; color: #241430; }\n.sla__row { display: flex; justify-content: space-between; margin-bottom: 6px; }\n.sla__label { font-weight: 700; }\n.sla__status { font-weight: 700; text-transform: capitalize; padding: 1px 8px; border-radius: 999px; font-size: 11px; }\n.sla--on-track .sla__status { background: #A8E6C1; color: #17532F; }\n.sla--at-risk .sla__status { background: #E8A020; color: #4A2E00; }\n.sla--breached .sla__status { background: #B3261E; color: #FAF7F2; }\n.sla__track { height: 7px; border-radius: 999px; background: #24143018; overflow: hidden; }\n.sla__fill { height: 100%; border-radius: 999px; }\n@media (prefers-reduced-motion: no-preference) {\n .sla__fill { transition: width .2s ease; }\n}\n.sla--on-track .sla__fill { background: #2F8F5B; }\n.sla--at-risk .sla__fill { background: #B4790A; }\n.sla--breached .sla__fill { background: #B3261E; }\n.sla__due { margin: 6px 0 0; color: #241430b3; }\n</style>", "tailwind": "<div class=\"sla-tw sla-tw--{{status}} w-64 font-sans text-[12.5px] text-[#241430]\">\n <div class=\"flex justify-between mb-1.5\">\n <span class=\"font-bold\">{{label}}</span>\n <span class=\"sla-tw__status font-bold capitalize px-2 py-px rounded-full text-[11px]\">{{status}}</span>\n </div>\n <div role=\"progressbar\" aria-label=\"{{label}} time used\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"{{percentUsed}}\" class=\"h-[7px] rounded-full bg-[#24143018] overflow-hidden\">\n <div class=\"sla-tw__fill h-full rounded-full motion-safe:transition-[width] motion-safe:duration-300\" style=\"width:{{percentUsed}}%;\"></div>\n </div>\n <p class=\"mt-1.5 mb-0 text-[#241430]/70\">Due in {{dueIn}}</p>\n</div>\n<style>\n.sla-tw--on-track .sla-tw__status { background: #A8E6C1; color: #17532F; }\n.sla-tw--at-risk .sla-tw__status { background: #E8A020; color: #4A2E00; }\n.sla-tw--breached .sla-tw__status { background: #B3261E; color: #FAF7F2; }\n.sla-tw--on-track .sla-tw__fill { background: #2F8F5B; }\n.sla-tw--at-risk .sla-tw__fill { background: #B4790A; }\n.sla-tw--breached .sla-tw__fill { background: #B3261E; }\n</style>", "react": "export function SlaIndicator({\n label = \"{{label}}\",\n percentUsed = {{percentUsed}},\n status = \"{{status}}\",\n dueIn = \"{{dueIn}}\",\n}) {\n const palette = {\n \"on-track\": { badge: \"#A8E6C1\", badgeText: \"#17532F\", fill: \"#2F8F5B\" },\n \"at-risk\": { badge: \"#E8A020\", badgeText: \"#4A2E00\", fill: \"#B4790A\" },\n breached: { badge: \"#B3261E\", badgeText: \"#FAF7F2\", fill: \"#B3261E\" },\n }[status] ?? { badge: \"#A8E6C1\", badgeText: \"#17532F\", fill: \"#2F8F5B\" };\n return (\n <div style={{ width: 260, font: \"12.5px/1.3 system-ui, sans-serif\", color: \"#241430\" }}>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", marginBottom: 6 }}>\n <span style={{ fontWeight: 700 }}>{label}</span>\n <span style={{ fontWeight: 700, textTransform: \"capitalize\", padding: \"1px 8px\", borderRadius: 999,\n fontSize: 11, background: palette.badge, color: palette.badgeText }}>{status}</span>\n </div>\n <div role=\"progressbar\" aria-label={`${label} time used`} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percentUsed}\n style={{ height: 7, borderRadius: 999, background: \"#24143018\", overflow: \"hidden\" }}>\n <div className=\"sla-fill\" style={{ height: \"100%\", borderRadius: 999, width: `${percentUsed}%`, background: palette.fill }} />\n </div>\n <p style={{ margin: \"6px 0 0\", color: \"#241430b3\" }}>Due in {dueIn}</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .sla-fill { transition: width .2s ease; }\n }\n `}</style>\n </div>\n );\n}" }