Edit CTA

Name

Also known as (comma separated)

Brief definition Call-to-action.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Get started" }, { "id": "style", "type": "select", "label": "Style", "default": "solid", "options": [ "solid", "outline" ] }, { "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 }, { "id": "showArrow", "type": "toggle", "label": "Show arrow", "default": true } ]

Templates (JSON object keyed by format) { "html": "<button type=\"button\" class=\"btn-cta btn-cta--{{style}}\" style=\"--bg:{{bg}};border-radius:{{radius}}px\">\n {{label}}\n {{#if showArrow}}<span class=\"btn-cta__arrow\"><svg width=\"18\" height=\"18\" 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=\"M4 12h16M13 5l7 7-7 7\"/></svg></span>{{/if}}\n</button>\n<style>\n.btn-cta {\n font: 700 16px/1 system-ui, sans-serif;\n padding: 15px 26px;\n border: 2px solid var(--bg);\n background: var(--bg);\n color: #FAF7F2;\n cursor: pointer;\n display: inline-flex; align-items: center; gap: 10px;\n}\n@media (prefers-reduced-motion: no-preference) {\n.btn-cta { transition: transform .15s ease; }\n}\n.btn-cta--outline { background: transparent; color: var(--bg); }\n.btn-cta:hover { transform: translateY(-1px); }\n.btn-cta:active { transform: translateY(0); }\n.btn-cta:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n.btn-cta__arrow { display: inline-flex; }\n</style>", "tailwind": "<button type=\"button\" class=\"inline-flex items-center gap-2.5 px-6.5 py-4 text-base font-bold border-2 cursor-pointer motion-safe:transition-transform hover:-translate-y-0.5 active:translate-y-0 btn-cta-tw btn-cta-tw--{{style}}\" style=\"border-color:{{bg}};border-radius:{{radius}}px\">\n {{label}}\n {{#if showArrow}}<span class=\"inline-flex\"><svg width=\"18\" height=\"18\" 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=\"M4 12h16M13 5l7 7-7 7\"/></svg></span>{{/if}}\n</button>\n<style>\n.btn-cta-tw--solid { background: {{bg}}; color: #FAF7F2; }\n.btn-cta-tw--outline { background: transparent; color: {{bg}}; }\n.btn-cta-tw--{{style}}:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n</style>", "react": "export function CtaButton({\n label = \"{{label}}\",\n style = \"{{style}}\",\n bg = \"{{bg}}\",\n radius = {{radius}},\n showArrow = {{showArrow}},\n}) {\n const solid = style === \"solid\";\n return (\n <button\n type=\"button\"\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: 10,\n padding: \"15px 26px\",\n borderRadius: radius,\n border: `2px solid ${bg}`,\n background: solid ? bg : \"transparent\",\n color: solid ? \"#FAF7F2\" : bg,\n font: \"700 16px/1 system-ui, sans-serif\",\n cursor: \"pointer\",\n }}\n >\n {label}\n {showArrow && (\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M4 12h16M13 5l7 7-7 7\" />\n </svg>\n )}\n </button>\n );\n}" }