Edit Snackbar

Name

Also known as (comma separated)

Brief definition Temporary message often containing an action.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "message", "type": "text", "label": "Message", "default": "Conversation archived" }, { "id": "actionLabel", "type": "text", "label": "Action label", "default": "Undo" }, { "id": "showAction", "type": "toggle", "label": "Show action", "default": true }, { "id": "duration", "type": "number", "label": "Auto-dismiss (seconds)", "default": 5, "min": 2, "max": 10, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"snackbar\" role=\"status\" aria-live=\"polite\">\n <p class=\"snackbar__message\">{{message}}</p>\n {{#if showAction}}<button type=\"button\" class=\"snackbar__action\">{{actionLabel}}</button>{{/if}}\n <span class=\"snackbar__timer\" aria-hidden=\"true\" style=\"animation-duration:{{duration}}s;\"></span>\n</div>\n<style>\n.snackbar { position: relative; display: flex; align-items: center; gap: 16px; max-width: 380px; min-width: 260px;\n padding: 12px 16px; box-sizing: border-box; border-radius: 10px; background: #241430; color: #FAF7F2;\n font: 13.5px/1.4 system-ui, sans-serif; overflow: hidden; box-shadow: 0 10px 28px rgba(36,20,48,.25); }\n.snackbar__message { flex: 1; margin: 0; }\n.snackbar__action { border: none; background: transparent; color: #A8E6C1; font: 700 12.5px system-ui, sans-serif;\n cursor: pointer; padding: 4px 6px; border-radius: 4px; white-space: nowrap; }\n.snackbar__action:hover { background: #FAF7F218; }\n.snackbar__action:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }\n.snackbar__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #A8E6C1;\n transform-origin: left; }\n@keyframes snackbar-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }\n@media (prefers-reduced-motion: no-preference) {\n .snackbar__timer { animation-name: snackbar-shrink; animation-timing-function: linear; animation-fill-mode: forwards; }\n}\n</style>", "tailwind": "<div role=\"status\" aria-live=\"polite\" class=\"snackbar-tw relative flex items-center gap-4 max-w-sm min-w-[260px] px-4 py-3 box-border rounded-lg bg-[#241430] text-[#FAF7F2] font-sans text-[13.5px] overflow-hidden shadow-lg\">\n <p class=\"flex-1 m-0\">{{message}}</p>\n {{#if showAction}}<button type=\"button\" class=\"border-0 bg-transparent text-[#A8E6C1] font-bold text-[12.5px] cursor-pointer px-1.5 py-1 rounded whitespace-nowrap hover:bg-white/10\">{{actionLabel}}</button>{{/if}}\n <span aria-hidden=\"true\" class=\"snackbar-tw__timer absolute left-0 bottom-0 h-[3px] w-full bg-[#A8E6C1] origin-left\" style=\"animation-duration:{{duration}}s;\"></span>\n</div>\n<style>\n@keyframes snackbar-tw-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }\n@media (prefers-reduced-motion: no-preference) {\n .snackbar-tw__timer { animation-name: snackbar-tw-shrink; animation-timing-function: linear; animation-fill-mode: forwards; }\n}\n</style>", "react": "export function Snackbar({\n message = \"{{message}}\",\n actionLabel = \"{{actionLabel}}\",\n showAction = {{showAction}},\n duration = {{duration}},\n}) {\n return (\n <div role=\"status\" aria-live=\"polite\" style={{ position: \"relative\", display: \"flex\", alignItems: \"center\", gap: 16,\n maxWidth: 380, minWidth: 260, padding: \"12px 16px\", boxSizing: \"border-box\", borderRadius: 10, background: \"#241430\",\n color: \"#FAF7F2\", font: \"13.5px/1.4 system-ui, sans-serif\", overflow: \"hidden\", boxShadow: \"0 10px 28px rgba(36,20,48,.25)\" }}>\n <p style={{ flex: 1, margin: 0 }}>{message}</p>\n {showAction && (\n <button type=\"button\" style={{ border: \"none\", background: \"transparent\", color: \"#A8E6C1\", fontWeight: 700,\n fontSize: 12.5, cursor: \"pointer\", padding: \"4px 6px\", borderRadius: 4, whiteSpace: \"nowrap\" }}>{actionLabel}</button>\n )}\n <span aria-hidden=\"true\" className=\"snackbar-timer\" style={{ position: \"absolute\", left: 0, bottom: 0, height: 3, width: \"100%\", background: \"#A8E6C1\",\n transformOrigin: \"left\" }} />\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .snackbar-timer { animation: snackbar-react-shrink ${duration}s linear forwards; }\n @keyframes snackbar-react-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }\n }\n `}</style>\n </div>\n );\n}" }