Edit Quick Action

Name

Also known as (comma separated)

Brief definition Frequently used contextual action.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Star" }, { "id": "icon", "type": "select", "label": "Icon", "default": "star", "options": [ "star", "archive", "share" ] }, { "id": "active", "type": "toggle", "label": "Pressed (e.g. starred)", "default": false }, { "id": "bg", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 999, "min": 0, "max": 999, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<button type=\"button\" class=\"qa qa--{{icon}}{{#if active}} qa--active{{/if}}\" style=\"--bg:{{bg}};border-radius:{{radius}}px\" aria-pressed=\"{{active}}\">\n <span class=\"qa__glyph qa__glyph--star\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 3l2.6 5.6 6.1.6-4.6 4.1 1.3 6-5.4-3.2L6.6 19l1.3-6-4.6-4.1 6.1-.6z\"/></svg></span>\n <span class=\"qa__glyph qa__glyph--archive\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"4\" rx=\"1\"/><path d=\"M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8M10 13h4\"/></svg></span>\n <span class=\"qa__glyph qa__glyph--share\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"6\" cy=\"12\" r=\"2.4\"/><circle cx=\"18\" cy=\"6\" r=\"2.4\"/><circle cx=\"18\" cy=\"18\" r=\"2.4\"/><path d=\"M8.2 10.8l7.5-4.5M8.2 13.2l7.5 4.5\"/></svg></span>\n {{label}}\n</button>\n<style>\n.qa {\n display: inline-flex; align-items: center; gap: 6px;\n font: 600 13px/1 system-ui, sans-serif;\n padding: 8px 14px;\n border: 1.5px solid rgba(36,20,48,.25);\n background: #FAF7F2;\n color: #241430;\n cursor: pointer;\n}\n.qa__glyph { display: none; }\n.qa--star .qa__glyph--star, .qa--archive .qa__glyph--archive, .qa--share .qa__glyph--share { display: inline-flex; }\n.qa--active { background: var(--bg); border-color: var(--bg); color: #FAF7F2; }\n.qa:hover:not(.qa--active) { background: rgba(36,20,48,.06); }\n.qa:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n</style>", "tailwind": "<button type=\"button\" class=\"inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[#FAF7F2] text-[#241430] cursor-pointer hover:bg-black/5 qa-tw qa-tw--{{icon}}{{#if active}} qa-tw--active{{/if}}\" style=\"border:1.5px solid rgba(36,20,48,.25);border-radius:{{radius}}px\" aria-pressed=\"{{active}}\">\n <span class=\"qa-tw__glyph qa-tw__glyph--star\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 3l2.6 5.6 6.1.6-4.6 4.1 1.3 6-5.4-3.2L6.6 19l1.3-6-4.6-4.1 6.1-.6z\"/></svg></span>\n <span class=\"qa-tw__glyph qa-tw__glyph--archive\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"4\" rx=\"1\"/><path d=\"M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8M10 13h4\"/></svg></span>\n <span class=\"qa-tw__glyph qa-tw__glyph--share\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"6\" cy=\"12\" r=\"2.4\"/><circle cx=\"18\" cy=\"6\" r=\"2.4\"/><circle cx=\"18\" cy=\"18\" r=\"2.4\"/><path d=\"M8.2 10.8l7.5-4.5M8.2 13.2l7.5 4.5\"/></svg></span>\n {{label}}\n</button>\n<style>\n.qa-tw__glyph { display: none; }\n.qa-tw--star .qa-tw__glyph--star, .qa-tw--archive .qa-tw__glyph--archive, .qa-tw--share .qa-tw__glyph--share { display: inline-flex; }\n.qa-tw--active { background: {{bg}} !important; border-color: {{bg}} !important; color: #FAF7F2 !important; }\n.qa-tw--{{icon}}:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n</style>", "react": "const QA_ICONS = {\n star: <path d=\"M12 3l2.6 5.6 6.1.6-4.6 4.1 1.3 6-5.4-3.2L6.6 19l1.3-6-4.6-4.1 6.1-.6z\" />,\n archive: <><rect x=\"3\" y=\"4\" width=\"18\" height=\"4\" rx=\"1\" /><path d=\"M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8M10 13h4\" /></>,\n share: <><circle cx=\"6\" cy=\"12\" r=\"2.4\" /><circle cx=\"18\" cy=\"6\" r=\"2.4\" /><circle cx=\"18\" cy=\"18\" r=\"2.4\" /><path d=\"M8.2 10.8l7.5-4.5M8.2 13.2l7.5 4.5\" /></>,\n};\n\nexport function QuickActionButton({\n label = \"{{label}}\",\n icon = \"{{icon}}\",\n active = {{active}},\n bg = \"{{bg}}\",\n radius = {{radius}},\n}) {\n return (\n <button\n type=\"button\"\n aria-pressed={active}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: 6,\n padding: \"8px 14px\",\n borderRadius: radius,\n border: `1.5px solid ${active ? bg : \"rgba(36,20,48,.25)\"}`,\n background: active ? bg : \"#FAF7F2\",\n color: active ? \"#FAF7F2\" : \"#241430\",\n font: \"600 13px/1 system-ui, sans-serif\",\n cursor: \"pointer\",\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n {QA_ICONS[icon]}\n </svg>\n {label}\n </button>\n );\n}" }