Notificación temporal.

<aside class="ui-sample ui-feedback" data-toast="true" role="status" aria-live="polite"><div><strong>Cambios guardados</strong><p>Versión 4 · 18:24 CLT</p></div><button class="btn btn--icon" type="button" aria-label="Cerrar notificación">×</button></aside>

<aside class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-toast="true" role="status" aria-live="polite"><div><strong>Cambios guardados</strong><p>Versión 4 · 18:24 CLT</p></div><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Cerrar notificación">×</button></aside>

import type { MouseEventHandler } from "react";

export interface ToastProps {
  /** Qué acción terminó; vacío omite el título. */
  title?: string;
  /** Detalle breve bajo el título; vacío omite el párrafo. */
  description?: string;
  /** Nombre accesible del botón de cierre; vacío oculta el botón. */
  closeLabel?: string;
  /** Se llama al pulsar el botón de cierre; quien usa el componente lo retira. */
  onClose?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Notificación temporal que confirma una acción recién hecha (guardar, copiar, enviar) sin cambiar de vista.
 *
 * Usa `role="status"` con `aria-live="polite"`. El componente no se oculta solo: quien lo usa decide cuándo retirarlo, por ejemplo en `onClose`.
 *
 * @example <Toast title="Cambios guardados" description="Versión 4 · 18:24 CLT" onClose={cerrar} />
 * @example <Toast title="Enlace copiado" description="Puedes pegarlo en otro sitio." onClose={cerrar} />
 */
export function Toast({
  title = "Cambios guardados",
  description = "Versión 4 · 18:24 CLT",
  closeLabel = "Cerrar notificación",
  onClose,
  className,
}: ToastProps) {
  return (
    <aside className={["ui-feedback", className].filter(Boolean).join(" ")} data-toast role="status" aria-live="polite">
      {title || description ? (
        <div>
          {title ? <strong>{title}</strong> : null}
          {description ? <p>{description}</p> : null}
        </div>
      ) : null}
      {closeLabel ? <button className="btn btn--icon" type="button" aria-label={closeLabel} onClick={onClose}>×</button> : null}
    </aside>
  );
}