Edit Text Button

Name

Also known as (comma separated)

Brief definition Button represented primarily by text.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "View details" }, { "id": "size", "type": "select", "label": "Size", "default": "md", "options": [ "sm", "md" ] }, { "id": "bg", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "withIcon", "type": "toggle", "label": "Trailing chevron", "default": true }, { "id": "disabled", "type": "toggle", "label": "Disabled", "default": false } ]

Templates (JSON object keyed by format) { "html": "<button type=\"button\" class=\"btn-text btn-text--{{size}}\" style=\"--bg:{{bg}}\"{{#if disabled}} disabled{{/if}}>\n {{label}}\n {{#if withIcon}}<span class=\"btn-text__chevron\"><svg width=\"13\" height=\"13\" 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></span>{{/if}}\n</button>\n<style>\n.btn-text {\n display: inline-flex; align-items: center; gap: 4px;\n font: 600 15px/1 system-ui, sans-serif;\n padding: 4px 2px;\n border: none;\n border-bottom: 1.5px solid transparent;\n background: transparent;\n color: var(--bg);\n cursor: pointer;\n}\n.btn-text--sm { font-size: 13px; }\n.btn-text__chevron { display: inline-flex; transform: rotate(-90deg); }\n.btn-text:hover:not(:disabled) { border-bottom-color: var(--bg); }\n.btn-text:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n.btn-text:disabled { opacity: .4; cursor: not-allowed; }\n</style>", "tailwind": "<button type=\"button\" class=\"inline-flex items-center gap-1 py-1 px-0.5 bg-transparent border-none border-b-[1.5px] border-transparent cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:border-current btn-text-tw btn-text-tw--{{size}}\" style=\"color:{{bg}}\"{{#if disabled}} disabled{{/if}}>\n {{label}}\n {{#if withIcon}}<span class=\"inline-flex -rotate-90\"><svg width=\"13\" height=\"13\" 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></span>{{/if}}\n</button>\n<style>\n.btn-text-tw--sm { font-size: 13px; font-weight: 600; }\n.btn-text-tw--md { font-size: 15px; font-weight: 600; }\n.btn-text-tw:focus-visible { outline:2px solid #241430;outline-offset:2px; }\n</style>", "react": "export function TextButton({\n label = \"{{label}}\",\n size = \"{{size}}\",\n bg = \"{{bg}}\",\n withIcon = {{withIcon}},\n disabled = {{disabled}},\n}) {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n style={{\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: 4,\n padding: \"4px 2px\",\n border: \"none\",\n borderBottom: \"1.5px solid transparent\",\n background: \"transparent\",\n color: bg,\n fontWeight: 600,\n fontSize: size === \"sm\" ? 13 : 15,\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n opacity: disabled ? 0.4 : 1,\n }}\n >\n {label}\n {withIcon && (\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" style={{ transform: \"rotate(-90deg)\" }} aria-hidden=\"true\">\n <path d=\"M6 9l6 6 6-6\" />\n </svg>\n )}\n </button>\n );\n}" }