Edit Split Button

Name

Also known as (comma separated)

Brief definition Primary action plus dropdown actions.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Primary label", "default": "Save" }, { "id": "open", "type": "toggle", "label": "Menu open", "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": 8, "min": 0, "max": 20, "step": 1 }, { "id": "disabled", "type": "toggle", "label": "Disabled", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"split-btn\" style=\"--bg:{{bg}};border-radius:{{radius}}px\">\n <button type=\"button\" class=\"split-btn__main\"{{#if disabled}} disabled{{/if}}>{{label}}</button>\n <button type=\"button\" class=\"split-btn__caret\" aria-label=\"More save options\" aria-haspopup=\"menu\" aria-expanded=\"{{open}}\"{{#if disabled}} disabled{{/if}}>\n <svg width=\"15\" height=\"15\" 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=\"M6 9l6 6 6-6\"/></svg>\n </button>\n</div>\n<style>\n.split-btn { display: inline-flex; overflow: hidden; }\n.split-btn__main, .split-btn__caret {\n font: 600 15px/1 system-ui, sans-serif;\n border: none;\n background: var(--bg);\n color: #FAF7F2;\n cursor: pointer;\n}\n.split-btn__main { padding: 11px 18px; }\n.split-btn__caret { padding: 11px 12px; border-left: 1px solid rgba(250,247,242,.3); display: inline-flex; align-items: center; }\n.split-btn__main:hover:not(:disabled), .split-btn__caret:hover:not(:disabled) { filter: brightness(1.12); }\n.split-btn__caret[aria-expanded=\"true\"] { filter: brightness(0.85); }\n.split-btn__main:focus-visible, .split-btn__caret:focus-visible { outline:2px solid #241430;outline-offset:2px; position: relative; z-index: 1; }\n.split-btn__main:disabled, .split-btn__caret:disabled { opacity: .45; cursor: not-allowed; }\n</style>", "tailwind": "<div class=\"inline-flex overflow-hidden split-btn-tw\" style=\"border-radius:{{radius}}px\">\n <button type=\"button\" class=\"px-4.5 py-2.75 text-sm font-semibold text-[#FAF7F2] border-none cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed hover:brightness-110\" style=\"background:{{bg}}\"{{#if disabled}} disabled{{/if}}>{{label}}</button>\n <button type=\"button\" class=\"inline-flex items-center px-3 py-2.75 text-[#FAF7F2] border-none cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed hover:brightness-110 split-btn-tw__caret\" style=\"background:{{bg}};border-left:1px solid rgba(250,247,242,.3)\" aria-label=\"More save options\" aria-haspopup=\"menu\" aria-expanded=\"{{open}}\"{{#if disabled}} disabled{{/if}}>\n <svg width=\"15\" height=\"15\" 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=\"M6 9l6 6 6-6\"/></svg>\n </button>\n</div>\n<style>\n.split-btn-tw__caret[aria-expanded=\"true\"] { filter: brightness(0.85); }\n.split-btn-tw button:focus-visible { outline:2px solid #241430;outline-offset:2px; position: relative; z-index: 1; }\n</style>", "react": "export function SplitButton({\n label = \"{{label}}\",\n open = {{open}},\n bg = \"{{bg}}\",\n radius = {{radius}},\n disabled = {{disabled}},\n}) {\n const base = {\n border: \"none\",\n background: bg,\n color: \"#FAF7F2\",\n font: \"600 15px/1 system-ui, sans-serif\",\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.45 : 1,\n };\n return (\n <div style={{ display: \"inline-flex\", overflow: \"hidden\", borderRadius: radius }}>\n <button type=\"button\" disabled={disabled} style={{ ...base, padding: \"11px 18px\" }}>\n {label}\n </button>\n <button\n type=\"button\"\n disabled={disabled}\n aria-label=\"More save options\"\n aria-haspopup=\"menu\"\n aria-expanded={open}\n style={{\n ...base,\n padding: \"11px 12px\",\n borderLeft: \"1px solid rgba(250,247,242,.3)\",\n filter: open ? \"brightness(0.85)\" : \"none\",\n }}\n >\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M6 9l6 6 6-6\" />\n </svg>\n </button>\n </div>\n );\n}" }