Edit Long Press

Name

Also known as (comma separated)

Brief definition Touch-and-hold interaction.

Notes **Interaction Patterns:** Press-and-hold interaction.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "held", "type": "toggle", "label": "Held to completion", "default": false }, { "id": "duration", "type": "number", "label": "Hold duration (ms)", "default": 600, "min": 200, "max": 1500, "step": 100 }, { "id": "label", "type": "text", "label": "Action label", "default": "Hold to delete" }, { "id": "accent", "type": "color", "label": "Colour", "default": "#F5C2E0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rsp-lp-stage\">\n <button type=\"button\" class=\"rsp-lp-btn{{#if held}} rsp-lp-btn--held{{/if}}\">\n <svg viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" aria-hidden=\"true\">\n <circle cx=\"22\" cy=\"22\" r=\"18\" fill=\"none\" stroke=\"#24143022\" stroke-width=\"4\"/>\n <circle class=\"rsp-lp-ring\" cx=\"22\" cy=\"22\" r=\"18\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"4\" stroke-dasharray=\"113.1\" style=\"stroke-dashoffset:{{#if held}}0{{/if}}{{#unless held}}113.1{{/unless}}; transform:rotate(-90deg); transform-origin:50% 50%;\"/>\n </svg>\n </button>\n <p class=\"rsp-lp-caption\">{{label}} &mdash; ring fills over {{duration}}ms of holding, {{#if held}}completed{{/if}}{{#unless held}}released early{{/unless}}</p>\n</div>\n<style>\n.rsp-lp-stage { width: 100%; max-width: 320px; padding: 18px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; text-align: center; }\n.rsp-lp-btn { border: none; background: transparent; cursor: pointer; padding: 0; }\n.rsp-lp-caption { margin: 12px 0 0; }\n@media (prefers-reduced-motion: no-preference) {\n .rsp-lp-ring { transition: stroke-dashoffset {{duration}}ms linear; }\n}\n</style>", "tailwind": "<div class=\"w-full max-w-[320px] p-[18px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70 text-center\">\n <button type=\"button\" class=\"border-0 bg-transparent cursor-pointer p-0\">\n <svg viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" aria-hidden=\"true\">\n <circle cx=\"22\" cy=\"22\" r=\"18\" fill=\"none\" stroke=\"#24143022\" stroke-width=\"4\"/>\n <circle class=\"tw-lp-ring\" cx=\"22\" cy=\"22\" r=\"18\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"4\" stroke-dasharray=\"113.1\" style=\"stroke-dashoffset:{{#if held}}0{{/if}}{{#unless held}}113.1{{/unless}}; transform:rotate(-90deg); transform-origin:50% 50%;\"/>\n </svg>\n </button>\n <p class=\"mt-3\">{{label}} &mdash; ring fills over {{duration}}ms of holding, {{#if held}}completed{{/if}}{{#unless held}}released early{{/unless}}</p>\n</div>\n<style>\n@media (prefers-reduced-motion: no-preference) {\n .tw-lp-ring { transition: stroke-dashoffset {{duration}}ms linear; }\n}\n</style>", "react": "export function LongPress({\n held = {{held}},\n duration = {{duration}},\n label = \"{{label}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ width: \"100%\", maxWidth: 320, padding: 18, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, fontFamily: \"system-ui, sans-serif\", fontSize: 13, color: \"#241430aa\", textAlign: \"center\" }}>\n <button type=\"button\" style={{ border: \"none\", background: \"transparent\", cursor: \"pointer\", padding: 0 }}>\n <svg viewBox=\"0 0 44 44\" width=\"44\" height=\"44\" aria-hidden=\"true\">\n <circle cx=\"22\" cy=\"22\" r=\"18\" fill=\"none\" stroke=\"#24143022\" strokeWidth=\"4\" />\n <circle className=\"ring\" cx=\"22\" cy=\"22\" r=\"18\" fill=\"none\" stroke={accent} strokeWidth=\"4\" strokeDasharray=\"113.1\" style={{ strokeDashoffset: held ? 0 : 113.1, transform: \"rotate(-90deg)\", transformOrigin: \"50% 50%\" }} />\n </svg>\n </button>\n <p style={{ margin: \"12px 0 0\" }}>{label} &mdash; ring fills over {duration}ms of holding, {held ? \"completed\" : \"released early\"}</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .ring { transition: stroke-dashoffset ${duration}ms linear; }\n }\n `}</style>\n </div>\n );\n}" }