Edit Badge

Name

Also known as (comma separated)

Brief definition Compact status/count indicator.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Label", "default": "New" }, { "id": "variant", "type": "select", "label": "Variant", "default": "solid", "options": [ "solid", "outline", "soft" ] }, { "id": "shape", "type": "select", "label": "Shape", "default": "pill", "options": [ "pill", "rounded", "square" ] }, { "id": "color", "type": "color", "label": "Colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "size", "type": "number", "label": "Font size", "default": 12, "min": 10, "max": 16, "step": 1 }, { "id": "dot", "type": "toggle", "label": "Show dot", "default": true } ]

Templates (JSON object keyed by format) { "html": "<span class=\"badge badge--{{variant}} badge--{{shape}}\" style=\"--c:{{color}};font-size:{{size}}px;\">\n {{#if dot}}<span class=\"badge__dot\"></span>{{/if}}\n {{label}}\n</span>\n<style>\n.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 1em system-ui, sans-serif;\n padding: .35em .75em; border: 1.5px solid var(--c); line-height: 1; box-sizing: border-box; }\n.badge--pill { border-radius: 999px; }\n.badge--rounded { border-radius: 6px; }\n.badge--square { border-radius: 0; }\n.badge--solid { background: var(--c); color: #FAF7F2; }\n.badge--outline { background: transparent; color: var(--c); }\n.badge--soft { background: color-mix(in srgb, var(--c) 20%, #FAF7F2); color: var(--c); border-color: transparent; }\n.badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }\n</style>", "tailwind": "<span class=\"badge-tw badge-tw--{{variant}} badge-tw--{{shape}} inline-flex items-center gap-1.5 font-semibold leading-none px-3 py-1.5 border-[1.5px] box-border\" style=\"--c:{{color}};font-size:{{size}}px;\">\n {{#if dot}}<span class=\"rounded-full\" style=\"width:.5em;height:.5em;background:currentColor\"></span>{{/if}}\n {{label}}\n</span>\n<style>\n.badge-tw { border-color: var(--c); }\n.badge-tw--pill { border-radius: 999px; }\n.badge-tw--rounded { border-radius: 6px; }\n.badge-tw--square { border-radius: 0; }\n.badge-tw--solid { background: var(--c); color: #FAF7F2; }\n.badge-tw--outline { background: transparent; color: var(--c); }\n.badge-tw--soft { background: color-mix(in srgb, var(--c) 20%, #FAF7F2); color: var(--c); border-color: transparent; }\n</style>", "react": "export function Badge({\n label = \"{{label}}\",\n variant = \"{{variant}}\",\n shape = \"{{shape}}\",\n color = \"{{color}}\",\n size = {{size}},\n dot = {{dot}},\n}) {\n const radius = { pill: 999, rounded: 6, square: 0 }[shape] ?? 999;\n const palette = {\n solid: { background: color, color: \"#FAF7F2\", borderColor: color },\n outline: { background: \"transparent\", color, borderColor: color },\n soft: { background: `${color}33`, color, borderColor: \"transparent\" },\n }[variant] ?? {};\n return (\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, fontWeight: 600,\n fontSize: size, lineHeight: 1, padding: \"0.35em 0.75em\", borderRadius: radius,\n border: \"1.5px solid\", boxSizing: \"border-box\", ...palette }}>\n {dot && <span style={{ width: \"0.5em\", height: \"0.5em\", borderRadius: \"50%\", background: \"currentColor\" }} />}\n {label}\n </span>\n );\n}" }