Edit Search Token

Name

Also known as (comma separated)

Brief definition Structured portion of a query.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "field", "type": "text", "label": "Field", "default": "status" }, { "id": "value", "type": "text", "label": "Value", "default": "open" }, { "id": "kind", "type": "select", "label": "Kind", "default": "status", "options": [ "status", "assignee", "label" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<span class=\"stoken stoken--{{kind}}\" style=\"outline-color:{{accent}};\">\n <svg class=\"stoken__icon\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n <span class=\"stoken__text\">{{field}}:<b>{{value}}</b></span>\n <button type=\"button\" class=\"stoken__remove\" aria-label=\"Remove filter: {{field}} — {{value}}\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>\n </button>\n</span>\n<style>\n.stoken { display: inline-flex; align-items: center; gap: 5px; font: 13px system-ui, sans-serif; color: #241430; padding: 5px 6px 5px 9px; border-radius: 999px; border: 1px solid transparent; }\n.stoken:focus-within { outline: 2px solid; outline-offset: 2px; }\n.stoken--status { background: #A8E6C140; color: #1c5c37; }\n.stoken--assignee { background: #BFD9F250; color: #1c3d5c; }\n.stoken--label { background: #F5C2E050; color: #5c1c47; }\n.stoken__icon { flex: none; }\n.stoken__text { white-space: nowrap; }\n.stoken__remove { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: #24143014; color: inherit; cursor: pointer; }\n.stoken__remove:hover { background: #24143028; }\n</style>", "tailwind": "<span class=\"stoken-tw stoken-tw--{{kind}} inline-flex items-center gap-1.5 font-sans text-[13px] pl-2.5 pr-1.5 py-1 rounded-full focus-within:outline focus-within:outline-2 focus-within:outline-offset-2\" style=\"outline-color:{{accent}};\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" class=\"flex-none\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\"></circle></svg>\n <span class=\"whitespace-nowrap\">{{field}}:<b>{{value}}</b></span>\n <button type=\"button\" aria-label=\"Remove filter: {{field}} — {{value}}\" class=\"flex-none grid place-items-center w-4 h-4 rounded-full bg-[#24143014] hover:bg-[#24143028] text-inherit\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"></path></svg>\n </button>\n</span>\n<style>\n.stoken-tw--status { background: #A8E6C140; color: #1c5c37; }\n.stoken-tw--assignee { background: #BFD9F250; color: #1c3d5c; }\n.stoken-tw--label { background: #F5C2E050; color: #5c1c47; }\n</style>", "react": "export function SearchToken({\n field = \"{{field}}\",\n value = \"{{value}}\",\n kind = \"{{kind}}\",\n accent = \"{{accent}}\",\n}) {\n const styles = {\n status: { background: \"#A8E6C140\", color: \"#1c5c37\" },\n assignee: { background: \"#BFD9F250\", color: \"#1c3d5c\" },\n label: { background: \"#F5C2E050\", color: \"#5c1c47\" },\n };\n const kindStyle = styles[kind] ?? styles.status;\n return (\n <span style={{\n display: \"inline-flex\", alignItems: \"center\", gap: 5, fontFamily: \"system-ui, sans-serif\", fontSize: 13,\n padding: \"5px 6px 5px 9px\", borderRadius: 999, ...kindStyle,\n }}>\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" style={{ flex: \"none\" }}>\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2\" />\n </svg>\n <span style={{ whiteSpace: \"nowrap\" }}>{field}:<b>{value}</b></span>\n <button type=\"button\" aria-label={`Remove filter: ${field} — ${value}`} style={{\n flex: \"none\", display: \"grid\", placeItems: \"center\", width: 16, height: 16, border: \"none\",\n borderRadius: \"50%\", background: \"#24143014\", color: \"inherit\", cursor: \"pointer\",\n }}>\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" /></svg>\n </button>\n </span>\n );\n}" }