Edit In-app Notification

Name

Also known as (comma separated)

Brief definition Notification shown inside the application.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "message", "type": "text", "label": "Message", "default": "New comment on your design file" }, { "id": "kind", "type": "select", "label": "Kind", "default": "info", "options": [ "info", "success", "warning" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#E8A020", "#F5C2E0", "#D9C8F0", "#241430" ] }, { "id": "timestamp", "type": "text", "label": "Timestamp (ISO)", "default": "2026-08-18T09:05:00" }, { "id": "dismissible", "type": "toggle", "label": "Show close button", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class='iapn iapn--{{kind}}' style='border-left-color:{{accent}};' role='status'>\n <span class='iapn__icon' style='background:{{accent}};' aria-hidden='true'></span>\n <div class='iapn__body'>\n <p class='iapn__message'>{{message}}</p>\n <time class='iapn__time' datetime='{{timestamp}}'>{{timestamp}}</time>\n </div>\n {{#if dismissible}}<button class='iapn__close' type='button' aria-label='Dismiss notification'>&times;</button>{{/if}}\n</div>\n<style>\n.iapn { display: flex; align-items: flex-start; gap: 10px; max-width: 400px; padding: 12px 14px; background: #FAF7F2; color: #241430; border-left: 4px solid; border-radius: 10px; box-shadow: 0 6px 18px rgba(36,20,48,.12); font: 14px/1.4 system-ui, sans-serif; box-sizing: border-box; }\n.iapn__icon { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; position: relative; }\n.iapn__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; }\n.iapn--info .iapn__icon::before { content: 'i'; }\n.iapn--success .iapn__icon::before { content: '\\2713'; }\n.iapn--warning .iapn__icon::before { content: '!'; }\n.iapn__body { flex: 1; }\n.iapn__message { margin: 0 0 2px; }\n.iapn__time { display: block; font-size: 11px; color: #24143080; }\n.iapn__close { border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; padding: 0; }\n.iapn__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n.iapn__close:hover { color: #b0273e; }\n</style>", "tailwind": "<div role='status' class='iapn-tw iapn-tw--{{kind}} flex items-start gap-2.5 max-w-[400px] p-3 bg-[#FAF7F2] text-[#241430] rounded-lg shadow-md text-sm border-l-4 box-border' style='border-left-color:{{accent}}'>\n <span class='iapn-tw__icon w-[18px] h-[18px] rounded-full flex-shrink-0 mt-0.5 relative' style='background:{{accent}}' aria-hidden='true'></span>\n <div class='flex-1'>\n <p class='m-0 mb-0.5'>{{message}}</p>\n <time class='block text-[11px] text-[#241430]/50' datetime='{{timestamp}}'>{{timestamp}}</time>\n </div>\n {{#if dismissible}}<button type='button' aria-label='Dismiss notification' class='border-0 bg-transparent text-base leading-none cursor-pointer p-0'>&times;</button>{{/if}}\n</div>\n<style>\n.iapn-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: #FAF7F2; content: ''; }\n.iapn-tw--info .iapn-tw__icon::before { content: 'i'; }\n.iapn-tw--success .iapn-tw__icon::before { content: '\\2713'; }\n.iapn-tw--warning .iapn-tw__icon::before { content: '!'; }\n</style>", "react": "export function InAppNotification({\n message = '{{message}}',\n kind = '{{kind}}',\n accent = '{{accent}}',\n timestamp = '{{timestamp}}',\n dismissible = {{dismissible}},\n}) {\n const icon = { info: 'i', success: '\\u2713', warning: '!' }[kind] ?? 'i';\n return (\n <div role='status' style={{ display: 'flex', alignItems: 'flex-start', gap: 10, maxWidth: 400, padding: '12px 14px', background: '#FAF7F2', color: '#241430', borderLeft: `4px solid ${accent}`, borderRadius: 10, boxShadow: '0 6px 18px rgba(36,20,48,.12)', fontFamily: 'system-ui, sans-serif', fontSize: 14 }}>\n <span aria-hidden='true' style={{ width: 18, height: 18, borderRadius: '50%', background: accent, flexShrink: 0, marginTop: 2, display: 'grid', placeItems: 'center', color: '#FAF7F2', fontSize: 11, fontWeight: 700 }}>{icon}</span>\n <div style={{ flex: 1 }}>\n <p style={{ margin: '0 0 2px' }}>{message}</p>\n <time style={{ display: 'block', fontSize: 11, color: '#24143080' }} dateTime={timestamp}>{timestamp}</time>\n </div>\n {dismissible && (\n <button type='button' aria-label='Dismiss notification' style={{ border: 'none', background: 'transparent', fontSize: 16, cursor: 'pointer', padding: 0 }}>&times;</button>\n )}\n </div>\n );\n}" }