Toast

Temporary notification.

html

<div class="toast toast--success" style="border-left-color:#A8E6C1;" role="status">
  <div class="toast__row">
    <span class="toast__icon" style="background:#A8E6C1;" aria-hidden="true"></span>
    <p class="toast__message">Your changes have been saved</p>
    <button class="toast__close" type="button" aria-label="Dismiss">×</button>
  </div>
  <p class="toast__timer">Auto-dismiss after 4s</p>
</div>
<style>
.toast { display: flex; flex-direction: column; gap: 4px; max-width: 320px; padding: 14px 16px; box-sizing: border-box;
  background: #FAF7F2; color: #241430; border-radius: 10px; border-left: 4px solid;
  box-shadow: 0 10px 28px rgba(36,20,48,.2); font: 14px/1.4 system-ui, sans-serif; }
.toast__row { display: flex; align-items: center; gap: 10px; }
.toast__icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; position: relative; }
.toast__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 system-ui, sans-serif; color: #FAF7F2; }
.toast--success .toast__icon::before { content: "✓"; }
.toast--info .toast__icon::before { content: "i"; }
.toast--warning .toast__icon::before { content: "!"; }
.toast--error .toast__icon::before { content: "×"; }
.toast__message { margin: 0; flex: 1; }
.toast__close { border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; color: #241430; padding: 0; }
.toast__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.toast__timer { margin: 0; font-size: 11px; color: #24143080; padding-left: 30px; }
</style>

tailwind

<div role="status" class="toast-tw toast-tw--success flex flex-col gap-1 max-w-xs rounded-lg bg-[#FAF7F2] text-[#241430] shadow-lg p-3.5 border-l-4 box-border" style="border-left-color:#A8E6C1">
  <div class="flex items-center gap-2.5">
    <span class="toast-tw__icon w-5 h-5 rounded-full flex-shrink-0" style="background:#A8E6C1" aria-hidden="true"></span>
    <p class="flex-1 m-0 text-sm">Your changes have been saved</p>
    <button type="button" aria-label="Dismiss" class="border-0 bg-transparent text-base leading-none cursor-pointer p-0">×</button>
  </div>
  <p class="m-0 text-[11px] text-[#241430]/50 pl-5">Auto-dismiss after 4s</p>
</div>
<style>
.toast-tw__icon { position: relative; }
.toast-tw__icon::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; color: #FAF7F2; }
.toast-tw--success .toast-tw__icon::before { content: "✓"; }
.toast-tw--info .toast-tw__icon::before { content: "i"; }
.toast-tw--warning .toast-tw__icon::before { content: "!"; }
.toast-tw--error .toast-tw__icon::before { content: "×"; }
</style>

react

export function Toast({
  message = "Your changes have been saved",
  variant = "success",
  accent = "#A8E6C1",
  duration = 4,
  dismissible = true,
}) {
  const icon = { success: "✓", info: "i", warning: "!", error: "×" }[variant] ?? "•";
  return (
    <div role="status" style={{ display: "flex", flexDirection: "column", gap: 4, maxWidth: 320, boxSizing: "border-box",
      background: "#FAF7F2", color: "#241430", borderRadius: 10,
      borderLeft: `4px solid ${accent}`, boxShadow: "0 10px 28px rgba(36,20,48,.2)", padding: "14px 16px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 20, height: 20, borderRadius: "50%", background: accent, flexShrink: 0,
          display: "grid", placeItems: "center", color: "#FAF7F2", fontSize: 12, fontWeight: 700 }}>{icon}</span>
        <p style={{ flex: 1, margin: 0, fontSize: 14 }}>{message}</p>
        {dismissible && (
          <button type="button" aria-label="Dismiss" style={{ border: "none", background: "transparent", fontSize: 16, cursor: "pointer", padding: 0 }}>×</button>
        )}
      </div>
      <p style={{ margin: 0, fontSize: 11, color: "#24143080", paddingLeft: 30 }}>Auto-dismiss after {duration}s</p>
    </div>
  );
}