Edit Route

Name

Also known as (comma separated)

Brief definition Addressable application location.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "path", "type": "text", "label": "Path", "default": "/users/:id" }, { "id": "label", "type": "text", "label": "Label", "default": "View user" }, { "id": "variant", "type": "select", "label": "Variant", "default": "link", "options": [ "link", "badge" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<a class=\"route route--{{variant}}\" href=\"#\" style=\"--accent:{{accent}};\">\n <code class=\"route__path\">{{path}}</code>\n <span class=\"route__label\">{{label}}</span>\n</a>\n<style>\n.route { display: inline-flex; align-items: center; gap: 8px; font: 14px system-ui, sans-serif; color: #241430; text-decoration: none; padding: 8px 12px; border-radius: 10px; }\n.route__path { font: 12px/1 \"SFMono-Regular\", Consolas, monospace; background: rgba(36,20,48,.06); padding: 3px 6px; border-radius: 6px; }\n.route--link { background: transparent; border: 1px solid rgba(36,20,48,.12); }\n.route--link:hover, .route--link:focus-visible { border-color: var(--accent); outline: none; }\n.route--badge { background: var(--accent); }\n.route:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>", "tailwind": "<a href=\"#\" class=\"route-tw route-tw--{{variant}} inline-flex items-center gap-2 font-sans text-sm text-[#241430] no-underline px-3 py-2 rounded-xl\" style=\"--accent:{{accent}};\">\n <code class=\"text-xs bg-[#241430]/[.06] px-1.5 py-0.5 rounded-md font-mono\">{{path}}</code>\n <span>{{label}}</span>\n</a>\n<style>\n.route-tw--link { border: 1px solid rgba(36,20,48,.12); }\n.route-tw--link:hover { border-color: var(--accent); }\n.route-tw--badge { background: var(--accent); }\n.route-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>", "react": "export function Route({\n path = \"{{path}}\",\n label = \"{{label}}\",\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n}) {\n const badge = variant === \"badge\";\n return (\n <a href=\"#\" style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", textDecoration: \"none\", padding: \"8px 12px\", borderRadius: 10, background: badge ? accent : \"transparent\", border: badge ? \"none\" : \"1px solid rgba(36,20,48,.12)\" }}>\n <code style={{ fontFamily: \"SFMono-Regular, Consolas, monospace\", fontSize: 12, background: \"rgba(36,20,48,.06)\", padding: \"3px 6px\", borderRadius: 6 }}>{path}</code>\n <span>{label}</span>\n </a>\n );\n}" }