Edit Progress State

Name

Also known as (comma separated)

Brief definition Current progression through a workflow.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "workflowTitle", "type": "text", "label": "Workflow", "default": "Order fulfilment" }, { "id": "currentStep", "type": "number", "label": "Current step", "default": 2, "min": 1, "max": 4, "step": 1 }, { "id": "variant", "type": "select", "label": "Display", "default": "bar", "options": [ "bar", "steps" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showLabels", "type": "toggle", "label": "Show step labels", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"progress-state progress-state--{{variant}}\" data-current-step=\"{{currentStep}}\" style=\"--accent:{{accent}};\">\n <h3 class=\"progress-state__title\">{{workflowTitle}}</h3>\n <p class=\"progress-state__status\">Step {{currentStep}} of 4</p>\n <div class=\"progress-state__bar-track\">\n <div class=\"progress-state__bar-fill\" style=\"width:calc({{currentStep}} / 4 * 100%);\"></div>\n </div>\n <ol class=\"progress-state__steps\">\n <li class=\"progress-state__step\"><span class=\"progress-state__dot\"></span>{{#if showLabels}}<span class=\"progress-state__label\">Received</span>{{/if}}</li>\n <li class=\"progress-state__step\"><span class=\"progress-state__dot\"></span>{{#if showLabels}}<span class=\"progress-state__label\">Confirmed</span>{{/if}}</li>\n <li class=\"progress-state__step\"><span class=\"progress-state__dot\"></span>{{#if showLabels}}<span class=\"progress-state__label\">Packed</span>{{/if}}</li>\n <li class=\"progress-state__step\"><span class=\"progress-state__dot\"></span>{{#if showLabels}}<span class=\"progress-state__label\">Shipped</span>{{/if}}</li>\n </ol>\n</div>\n<style>\n.progress-state { font: 15px/1.5 system-ui, sans-serif; max-width: 380px; padding: 20px; background: #FAF7F2; color: #241430; border-radius: 14px; border: 1.5px solid #24143020; }\n.progress-state__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }\n.progress-state__status { margin: 0 0 12px; font-size: 13px; color: #24143099; }\n.progress-state__bar-track { display: none; height: 8px; border-radius: 4px; background: #24143014; overflow: hidden; }\n.progress-state__bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }\n.progress-state--bar .progress-state__bar-track { display: block; }\n.progress-state__steps { display: none; list-style: none; margin: 0; padding: 0; gap: 18px; }\n.progress-state--steps .progress-state__steps { display: flex; }\n.progress-state__step { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }\n.progress-state__dot { width: 12px; height: 12px; border-radius: 50%; background: #24143020; }\n.progress-state__label { color: #241430cc; }\n.progress-state[data-current-step=\"1\"] .progress-state__step:nth-child(-n+1) .progress-state__dot { background: var(--accent); }\n.progress-state[data-current-step=\"2\"] .progress-state__step:nth-child(-n+2) .progress-state__dot { background: var(--accent); }\n.progress-state[data-current-step=\"3\"] .progress-state__step:nth-child(-n+3) .progress-state__dot { background: var(--accent); }\n.progress-state[data-current-step=\"4\"] .progress-state__step:nth-child(-n+4) .progress-state__dot { background: var(--accent); }\n</style>", "tailwind": "<div class=\"progress-tw progress-tw--{{variant}} font-sans max-w-[380px] p-5 bg-[#FAF7F2] text-[#241430] rounded-2xl border-[1.5px] border-[#24143020]\" data-current-step=\"{{currentStep}}\">\n <h3 class=\"m-0 mb-1 text-base font-bold\">{{workflowTitle}}</h3>\n <p class=\"m-0 mb-3 text-[13px] text-[#241430]/60\">Step {{currentStep}} of 4</p>\n <div class=\"progress-tw__bar-track h-2 rounded-full bg-[#24143014] overflow-hidden\">\n <div class=\"h-full rounded-full\" style=\"width:calc({{currentStep}} / 4 * 100%);background:{{accent}}\"></div>\n </div>\n <ol class=\"progress-tw__steps list-none m-0 p-0 gap-[18px]\">\n <li class=\"flex flex-col items-center gap-1.5 text-xs\"><span class=\"w-3 h-3 rounded-full bg-[#24143020]\"></span>{{#if showLabels}}<span class=\"text-[#241430]/80\">Received</span>{{/if}}</li>\n <li class=\"flex flex-col items-center gap-1.5 text-xs\"><span class=\"w-3 h-3 rounded-full bg-[#24143020]\"></span>{{#if showLabels}}<span class=\"text-[#241430]/80\">Confirmed</span>{{/if}}</li>\n <li class=\"flex flex-col items-center gap-1.5 text-xs\"><span class=\"w-3 h-3 rounded-full bg-[#24143020]\"></span>{{#if showLabels}}<span class=\"text-[#241430]/80\">Packed</span>{{/if}}</li>\n <li class=\"flex flex-col items-center gap-1.5 text-xs\"><span class=\"w-3 h-3 rounded-full bg-[#24143020]\"></span>{{#if showLabels}}<span class=\"text-[#241430]/80\">Shipped</span>{{/if}}</li>\n </ol>\n</div>\n<style>\n.progress-tw__bar-track { display: none; }\n.progress-tw--bar .progress-tw__bar-track { display: block; }\n.progress-tw__steps { display: none; }\n.progress-tw--steps .progress-tw__steps { display: flex; }\n</style>", "react": "export function ProgressState({\n workflowTitle = \"{{workflowTitle}}\",\n currentStep = {{currentStep}},\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n showLabels = {{showLabels}},\n}) {\n const steps = [\"Received\", \"Confirmed\", \"Packed\", \"Shipped\"];\n return (\n <div style={{ fontFamily: \"system-ui, sans-serif\", maxWidth: 380, padding: 20, background: \"#FAF7F2\",\n color: \"#241430\", borderRadius: 14, border: \"1.5px solid #24143020\" }}>\n <h3 style={{ margin: \"0 0 4px\", fontSize: 16, fontWeight: 700 }}>{workflowTitle}</h3>\n <p style={{ margin: \"0 0 12px\", fontSize: 13, color: \"#24143099\" }}>Step {currentStep} of 4</p>\n {variant === \"bar\" ? (\n <div style={{ height: 8, borderRadius: 4, background: \"#24143014\", overflow: \"hidden\" }}>\n <div style={{ height: \"100%\", borderRadius: 4, background: accent, width: `${(currentStep / 4) * 100}%` }} />\n </div>\n ) : (\n <ol style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\", gap: 18 }}>\n {steps.map((label, i) => (\n <li key={label} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 6, fontSize: 12 }}>\n <span style={{ width: 12, height: 12, borderRadius: \"50%\", background: i + 1 <= currentStep ? accent : \"#24143020\" }} />\n {showLabels && <span style={{ color: \"#241430cc\" }}>{label}</span>}\n </li>\n ))}\n </ol>\n )}\n </div>\n );\n}" }