Edit Click

Name

Also known as (comma separated)

Brief definition Pointer activation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "Add to cart" }, { "id": "variant", "type": "select", "label": "Variant", "default": "primary", "options": [ "primary", "secondary", "ghost" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "showPressed", "type": "toggle", "label": "Show pressed state", "default": false }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 24, "step": 2 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"click-demo\">\n <button type=\"button\" class=\"click-demo__btn click-demo__btn--{{variant}}{{#if showPressed}} is-pressed{{/if}}\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\">{{label}}</button>\n <p class=\"click-demo__caption\">{{#if showPressed}}shown mid-click: scaled down, darker &mdash; real :active fires the same way on a genuine click{{/if}}{{unless showPressed}}rest state &mdash; try clicking it{{/unless}}</p>\n</div>\n<style>\n.click-demo { width: 300px; font: 14px system-ui, sans-serif; color: #241430; }\n.click-demo__btn { padding: 12px 22px; border: 2px solid var(--accent); font: inherit; font-weight: 600; cursor: pointer; }\n@media (prefers-reduced-motion: no-preference) {\n.click-demo__btn { transition: transform .08s; }\n}\n.click-demo__btn--primary { background: var(--accent); color: #FAF7F2; }\n.click-demo__btn--secondary { background: transparent; color: var(--accent); }\n.click-demo__btn--ghost { background: transparent; border-color: transparent; color: var(--accent); }\n.click-demo__btn:active, .click-demo__btn.is-pressed { transform: scale(.96); filter: brightness(.9); }\n.click-demo__caption { margin-top: 10px; font-size: 12px; color: #241430aa; }\n</style>", "tailwind": "<div style=\"width:300px;font-family:system-ui,sans-serif;color:#241430\">\n <button type=\"button\" class=\"click-tw click-tw--{{variant}}{{#if showPressed}} is-pressed{{/if}} px-5.5 py-3 border-2 font-semibold cursor-pointer motion-safe:transition-transform active:scale-[.96] active:brightness-90\" style=\"border-color:{{accent}};border-radius:{{radius}}px\">{{label}}</button>\n <p class=\"mt-2.5 text-xs text-[#241430aa]\">{{#if showPressed}}shown mid-click: scaled down, darker &mdash; real :active fires the same way on a genuine click{{/if}}{{unless showPressed}}rest state &mdash; try clicking it{{/unless}}</p>\n</div>\n<style>\n.click-tw--primary { background: {{accent}}; color: #FAF7F2; }\n.click-tw--secondary { background: transparent; color: {{accent}}; }\n.click-tw--ghost { background: transparent; border-color: transparent; color: {{accent}}; }\n.click-tw.is-pressed { transform: scale(.96); filter: brightness(.9); }\n</style>", "react": "import { useState } from \"react\";\n\nexport function ClickDemo({\n label = \"{{label}}\",\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n showPressed = {{showPressed}},\n radius = {{radius}},\n}) {\n const [pressed, setPressed] = useState(showPressed);\n const skin = {\n primary: { background: accent, color: \"#FAF7F2\" },\n secondary: { background: \"transparent\", color: accent },\n ghost: { background: \"transparent\", borderColor: \"transparent\", color: accent },\n }[variant];\n return (\n <div style={{ width: 300, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n <button type=\"button\" className=\"click-btn\"\n onMouseDown={() => setPressed(true)}\n onMouseUp={() => setPressed(false)}\n style={{ padding: \"12px 22px\", border: \"2px solid \" + accent, fontWeight: 600, cursor: \"pointer\",\n transform: pressed ? \"scale(.96)\" : \"none\", filter: pressed ? \"brightness(.9)\" : \"none\",\n borderRadius: radius, ...skin }}>{label}</button>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430aa\" }}>{pressed ? \"shown mid-click: scaled down, darker\" : \"rest state \\u2014 try clicking it\"}</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .click-btn { transition: transform .08s; }\n }\n `}</style>\n </div>\n );\n}" }