Edit Banner

Name

Also known as (comma separated)

Brief definition Persistent page-level message.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "message", "type": "text", "label": "Message", "default": "Scheduled maintenance begins at 22:00 UTC. Some features may be unavailable." }, { "id": "tone", "type": "select", "label": "Tone", "default": "neutral", "options": [ "neutral", "success", "warning", "critical" ] }, { "id": "actionLabel", "type": "text", "label": "Action label", "default": "View status page" }, { "id": "dismissible", "type": "toggle", "label": "Dismissible", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"banner banner--{{tone}}\" role=\"region\" aria-label=\"Site announcement\">\n <span class=\"banner__icon\" aria-hidden=\"true\"></span>\n <p class=\"banner__message\">{{message}}</p>\n <a class=\"banner__action\" href=\"#\">{{actionLabel}}</a>\n {{#if dismissible}}<button type=\"button\" class=\"banner__close\" aria-label=\"Dismiss announcement\">×</button>{{/if}}\n</div>\n<style>\n.banner { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; box-sizing: border-box;\n padding: 12px 16px; font: 14px/1.4 system-ui, sans-serif; color: #FAF7F2; border-radius: 8px; }\n.banner__icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; position: relative; background: #FAF7F2; }\n.banner__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; }\n.banner--neutral { background: #241430; }\n.banner--neutral .banner__icon::before { content: \"i\"; color: #241430; }\n.banner--success { background: #216B45; }\n.banner--success .banner__icon::before { content: \"✓\"; color: #216B45; }\n.banner--warning { background: #8A5A08; }\n.banner--warning .banner__icon::before { content: \"!\"; color: #8A5A08; }\n.banner--critical { background: #8C1F17; }\n.banner--critical .banner__icon::before { content: \"‼\"; color: #8C1F17; }\n.banner__message { flex: 1; margin: 0; }\n.banner__action { color: #FAF7F2; font-weight: 600; text-decoration: underline; white-space: nowrap; }\n.banner__action:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }\n.banner__close { border: none; background: transparent; color: #FAF7F2; font-size: 16px; line-height: 1; cursor: pointer; padding: 2px; border-radius: 4px; }\n.banner__close:hover { background: #FAF7F224; }\n.banner__close:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }\n</style>", "tailwind": "<div role=\"region\" aria-label=\"Site announcement\" class=\"banner-tw banner-tw--{{tone}} flex items-center gap-3 w-full max-w-xl box-border px-4 py-3 rounded-lg text-[#FAF7F2] font-sans text-sm\">\n <span class=\"banner-tw__icon w-[18px] h-[18px] rounded-full flex-shrink-0 bg-[#FAF7F2]\" aria-hidden=\"true\"></span>\n <p class=\"flex-1 m-0\">{{message}}</p>\n <a href=\"#\" class=\"text-[#FAF7F2] font-semibold underline whitespace-nowrap\">{{actionLabel}}</a>\n {{#if dismissible}}<button type=\"button\" aria-label=\"Dismiss announcement\" class=\"border-0 bg-transparent text-[#FAF7F2] text-base leading-none cursor-pointer p-0.5 rounded hover:bg-white/15\">×</button>{{/if}}\n</div>\n<style>\n.banner-tw__icon { position: relative; }\n.banner-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; }\n.banner-tw--neutral { background: #241430; }\n.banner-tw--neutral .banner-tw__icon::before { content: \"i\"; color: #241430; }\n.banner-tw--success { background: #216B45; }\n.banner-tw--success .banner-tw__icon::before { content: \"✓\"; color: #216B45; }\n.banner-tw--warning { background: #8A5A08; }\n.banner-tw--warning .banner-tw__icon::before { content: \"!\"; color: #8A5A08; }\n.banner-tw--critical { background: #8C1F17; }\n.banner-tw--critical .banner-tw__icon::before { content: \"‼\"; color: #8C1F17; }\n</style>", "react": "export function Banner({\n message = \"{{message}}\",\n tone = \"{{tone}}\",\n actionLabel = \"{{actionLabel}}\",\n dismissible = {{dismissible}},\n}) {\n const palette = {\n neutral: { c: \"#241430\", icon: \"i\" },\n success: { c: \"#216B45\", icon: \"✓\" },\n warning: { c: \"#8A5A08\", icon: \"!\" },\n critical: { c: \"#8C1F17\", icon: \"‼\" },\n }[tone] ?? { c: \"#241430\", icon: \"i\" };\n return (\n <div role=\"region\" aria-label=\"Site announcement\" style={{ display: \"flex\", alignItems: \"center\", gap: 12,\n width: \"100%\", maxWidth: 640, boxSizing: \"border-box\", padding: \"12px 16px\", borderRadius: 8,\n background: palette.c, color: \"#FAF7F2\", font: \"14px/1.4 system-ui, sans-serif\" }}>\n <span aria-hidden=\"true\" style={{ width: 18, height: 18, borderRadius: \"50%\", flexShrink: 0, background: \"#FAF7F2\",\n display: \"grid\", placeItems: \"center\", color: palette.c, fontSize: 11, fontWeight: 700 }}>{palette.icon}</span>\n <p style={{ flex: 1, margin: 0 }}>{message}</p>\n <a href=\"#\" style={{ color: \"#FAF7F2\", fontWeight: 600, textDecoration: \"underline\", whiteSpace: \"nowrap\" }}>{actionLabel}</a>\n {dismissible && (\n <button type=\"button\" aria-label=\"Dismiss announcement\" style={{ border: \"none\", background: \"transparent\",\n color: \"#FAF7F2\", fontSize: 16, cursor: \"pointer\", padding: 2, borderRadius: 4 }}>×</button>\n )}\n </div>\n );\n}" }