Notification Toast

Temporary notification.

html

<div class="ntoast ntoast--comment" style="border-left-color:#F5C2E0;" role="status">
  <span class="ntoast__avatar" style="background:#F5C2E0;" aria-hidden="true">Priya Shah</span>
  <div class="ntoast__body">
    <p class="ntoast__text"><strong>Priya Shah</strong> left a comment on Q3 plan</p>
    <time class="ntoast__time" datetime="2026-08-18T09:14">Just now</time>
  </div>
  
</div>
<style>
.ntoast { display: flex; align-items: flex-start; gap: 10px; width: 300px; box-sizing: border-box; padding: 12px 14px; background: #FAF7F2; color: #241430; border-radius: 10px; border-left: 4px solid; box-shadow: 0 10px 28px rgba(36,20,48,.2); font: 13px/1.4 system-ui, sans-serif; }
.ntoast__avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font: 700 10px system-ui, sans-serif; color: #FAF7F2; overflow: hidden; text-indent: -999px; position: relative; }
.ntoast__avatar::before { position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; color: #FAF7F2; }
.ntoast--comment .ntoast__avatar::before { content: "💬"; }
.ntoast--mention .ntoast__avatar::before { content: "@"; }
.ntoast--system .ntoast__avatar::before { content: "⚙"; }
.ntoast__body { flex: 1; }
.ntoast__text { margin: 0; }
.ntoast__time { color: #24143080; font-size: 11px; }
.ntoast__pin { flex-shrink: 0; }
</style>

tailwind

<div role="status" class="ntoast-tw ntoast-tw--comment flex items-start gap-2.5 w-72 box-border p-3.5 bg-[#FAF7F2] text-[#241430] rounded-lg border-l-4 shadow-lg text-[13px]" style="border-left-color:#F5C2E0">
  <span aria-hidden="true" class="ntoast-tw__avatar w-7 h-7 rounded-full flex-shrink-0 grid place-items-center relative overflow-hidden" style="background:#F5C2E0"></span>
  <div class="flex-1">
    <p class="m-0"><strong>Priya Shah</strong> left a comment on Q3 plan</p>
    <time class="text-[#241430]/50 text-[11px]" datetime="2026-08-18T09:14">Just now</time>
  </div>
  
</div>
<style>
.ntoast-tw__avatar::before { position: absolute; inset: 0; display: grid; place-items: center; color: #FAF7F2; font-size: 12px; font-weight: 700; }
.ntoast-tw--comment .ntoast-tw__avatar::before { content: "💬"; }
.ntoast-tw--mention .ntoast-tw__avatar::before { content: "@"; }
.ntoast-tw--system .ntoast-tw__avatar::before { content: "⚙"; }
</style>

react

export function NotificationToast({
  actor = "Priya Shah",
  message = "left a comment on Q3 plan",
  kind = "comment",
  accent = "#F5C2E0",
  persistent = false,
}) {
  const icon = { comment: "💬", mention: "@", system: "⚙" }[kind] ?? "•";
  return (
    <div role="status" style={{ display: "flex", alignItems: "flex-start", gap: 10, width: 300, boxSizing: "border-box",
      padding: "12px 14px", background: "#FAF7F2", color: "#241430", borderRadius: 10,
      borderLeft: `4px solid ${accent}`, boxShadow: "0 10px 28px rgba(36,20,48,.2)", fontSize: 13 }}>
      <span aria-hidden="true" style={{ width: 28, height: 28, borderRadius: "50%", background: accent, flexShrink: 0,
        display: "grid", placeItems: "center", color: "#FAF7F2", fontSize: 12, fontWeight: 700 }}>{icon}</span>
      <div style={{ flex: 1 }}>
        <p style={{ margin: 0 }}><strong>{actor}</strong> {message}</p>
        <time style={{ color: "#24143080", fontSize: 11 }} dateTime="2026-08-18T09:14">Just now</time>
      </div>
      {persistent && <span aria-hidden="true">📌</span>}
    </div>
  );
}