Edit Icon Button

Name

Also known as (comma separated)

Brief definition Button represented primarily by an icon.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Accessible name", "default": "Add item" }, { "id": "icon", "type": "select", "label": "Icon", "default": "plus", "options": [ "plus", "settings", "trash", "heart" ] }, { "id": "size", "type": "select", "label": "Size", "default": "md", "options": [ "sm", "md", "lg" ] }, { "id": "bg", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "disabled", "type": "toggle", "label": "Disabled", "default": false } ]

Templates (JSON object keyed by format) { "html": "<button type=\"button\" class=\"icon-btn icon-btn--{{icon}} icon-btn--{{size}}\" style=\"--bg:{{bg}}\" aria-label=\"{{label}}\"{{#if disabled}} disabled{{/if}}>\n <span class=\"icon-btn__glyph icon-btn__glyph--plus\"><svg width=\"20\" height=\"20\" 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 5v14M5 12h14\"/></svg></span>\n <span class=\"icon-btn__glyph icon-btn__glyph--settings\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"/><circle cx=\"9\" cy=\"6\" r=\"2\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/><circle cx=\"15\" cy=\"12\" r=\"2\"/><line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"/><circle cx=\"7\" cy=\"18\" r=\"2\"/></svg></span>\n <span class=\"icon-btn__glyph icon-btn__glyph--trash\"><svg width=\"20\" height=\"20\" 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 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13\"/></svg></span>\n <span class=\"icon-btn__glyph icon-btn__glyph--heart\"><svg width=\"20\" height=\"20\" 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 20s-7-4.5-9.5-9A5 5 0 0112 5a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z\"/></svg></span>\n</button>\n<style>\n.icon-btn {\n display: inline-flex; align-items: center; justify-content: center;\n width: 40px; height: 40px;\n border-radius: 999px;\n border: none;\n background: var(--bg);\n color: #FAF7F2;\n cursor: pointer;\n}\n.icon-btn--sm { width: 32px; height: 32px; }\n.icon-btn--lg { width: 48px; height: 48px; }\n.icon-btn__glyph { display: none; }\n.icon-btn--plus .icon-btn__glyph--plus,\n.icon-btn--settings .icon-btn__glyph--settings,\n.icon-btn--trash .icon-btn__glyph--trash,\n.icon-btn--heart .icon-btn__glyph--heart { display: inline-flex; }\n.icon-btn:hover:not(:disabled) { filter: brightness(1.12); }\n.icon-btn:active:not(:disabled) { filter: brightness(0.9); }\n.icon-btn:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n.icon-btn:disabled { opacity: .4; cursor: not-allowed; }\n</style>", "tailwind": "<button type=\"button\" class=\"inline-flex items-center justify-center rounded-full border-none text-[#FAF7F2] cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:brightness-110 active:brightness-90 icon-btn-tw icon-btn-tw--{{icon}} icon-btn-tw--{{size}}\" style=\"background:{{bg}}\" aria-label=\"{{label}}\"{{#if disabled}} disabled{{/if}}>\n <span class=\"icon-btn-tw__glyph icon-btn-tw__glyph--plus\"><svg width=\"20\" height=\"20\" 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 5v14M5 12h14\"/></svg></span>\n <span class=\"icon-btn-tw__glyph icon-btn-tw__glyph--settings\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"/><circle cx=\"9\" cy=\"6\" r=\"2\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/><circle cx=\"15\" cy=\"12\" r=\"2\"/><line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"/><circle cx=\"7\" cy=\"18\" r=\"2\"/></svg></span>\n <span class=\"icon-btn-tw__glyph icon-btn-tw__glyph--trash\"><svg width=\"20\" height=\"20\" 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 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13\"/></svg></span>\n <span class=\"icon-btn-tw__glyph icon-btn-tw__glyph--heart\"><svg width=\"20\" height=\"20\" 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 20s-7-4.5-9.5-9A5 5 0 0112 5a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z\"/></svg></span>\n</button>\n<style>\n.icon-btn-tw--sm { width: 32px; height: 32px; }\n.icon-btn-tw--md { width: 40px; height: 40px; }\n.icon-btn-tw--lg { width: 48px; height: 48px; }\n.icon-btn-tw__glyph { display: none; }\n.icon-btn-tw--plus .icon-btn-tw__glyph--plus,\n.icon-btn-tw--settings .icon-btn-tw__glyph--settings,\n.icon-btn-tw--trash .icon-btn-tw__glyph--trash,\n.icon-btn-tw--heart .icon-btn-tw__glyph--heart { display: inline-flex; }\n.icon-btn-tw--{{icon}}:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n</style>", "react": "const ICONS = {\n plus: <path d=\"M12 5v14M5 12h14\" />,\n settings: (\n <>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\" /><circle cx=\"9\" cy=\"6\" r=\"2\" />\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" /><circle cx=\"15\" cy=\"12\" r=\"2\" />\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\" /><circle cx=\"7\" cy=\"18\" r=\"2\" />\n </>\n ),\n trash: <path d=\"M4 7h16M9 7V4h6v3M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13\" />,\n heart: <path d=\"M12 20s-7-4.5-9.5-9A5 5 0 0112 5a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z\" />,\n};\n\nexport function IconButton({\n label = \"{{label}}\",\n icon = \"{{icon}}\",\n size = \"{{size}}\",\n bg = \"{{bg}}\",\n disabled = {{disabled}},\n}) {\n const dim = size === \"sm\" ? 32 : size === \"lg\" ? 48 : 40;\n return (\n <button\n type=\"button\"\n aria-label={label}\n disabled={disabled}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: dim,\n height: dim,\n borderRadius: 999,\n border: \"none\",\n background: bg,\n color: \"#FAF7F2\",\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.4 : 1,\n }}\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n {ICONS[icon]}\n </svg>\n </button>\n );\n}" }