Skip to main content

​
showToast

Display a temporary notification toast message to the user. Toasts automatically appear at the top center of the screen and dismiss after a configurable duration.

​
Type Signature

function showToast(config: ToastConfig): void

​
Parameters

​
config
ToastConfig
required
Configuration object for the toast notification.

​
Toast Styles

The toast system uses the following color scheme:
TypeBackground ColorText Color
success#10b981 (green)#ffffff (white)
error#ef4444 (red)#ffffff (white)
warning#f59e0b (orange)#ffffff (white)
info#3b82f6 (blue)#ffffff (white)

​
Usage Examples

​
Success Toast

import { showToast } from "../../../domain/ui/toast";

showToast({
  message: "QR code downloaded successfully!",
  type: "success",
  duration: 3000,
});

​
Error Toast

showToast({
  message: "Error downloading QR code. Please try again.",
  type: "error",
});

​
Warning Toast

showToast({
  message: "Please complete all required fields before downloading",
  type: "warning",
});

​
Info Toast

showToast({
  message: "QR code opened for printing",
  type: "info",
  duration: 2000,
});

​
Real-World Usage

From src/components/qr-code-app/cards/qr-preview/card-qr-preview.tsx:102-105: 
await qr.current.download({
  name: fileName,
  extension: format,
});
showToast({
  message: `QR descargado como ${format.toUpperCase()}`,
  type: "success",
});

​
Animation Behavior

Toasts animate in with a slide-down effect and fade out with a slide-up effect. The animation keyframes are: Slide Down (entrance): 
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
Slide Up (exit): 
@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

​
Implementation Details

  • Toasts are positioned fixed at the top center of the viewport
  • Multiple toasts stack vertically with 0.5rem spacing
  • The toast container has z-index: 9999 to appear above all other content
  • Toasts are pointer-event transparent except for their own content
  • The toast system auto-initializes a container on first use

​
Source Reference

Implemented in src/domain/ui/toast.ts:65-132.

Build docs developers (and LLMs) love

Get started for freeTalk to us