Toast

A notification message that appears temporarily to provide feedback about an action.

Interactive Demo

Click the buttons to trigger toast notifications.

Variants

✓

Changes saved successfully

✕

Failed to delete item

⚠

Your session will expire soon

ℹ

New update available

With Description

✓

File uploaded

Your file has been uploaded and is ready to share.

Progress bar

Set showProgress to render a thin bar that drains over the toast's duration — gives the user a visual hint of how long the toast will remain.

✓

Saved

Mobile considerations

• Toast surface uses .tui-glass (Tier 3) — translucent + backdrop-blur on capable browsers, opaque fallback elsewhere.
• On prefers-reduced-motion: reduce, slide-in animation is replaced with instant fade.
• Toast container should be wrapped in <SafeAreaView edges={['top']}> so notifications clear iOS notch / status bar.

Usage

import { Toast } from 'trust-ui';

function Example() {
  const [toasts, setToasts] = useState([]);

  const addToast = () => {
    const id = Date.now().toString();
    setToasts((prev) => [...prev, { id, variant: 'success', message: 'Saved!' }]);
  };

  const removeToast = (id) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  };

  return (
    <>
      <Button onClick={addToast}>Show Toast</Button>
      {toasts.map((toast) => (
        <Toast key={toast.id} {...toast} onClose={() => removeToast(toast.id)} />
      ))}
    </>
  );
}

Props

Prop	Type	Default	Description
id	string	-	Unique identifier for the toast
variant	'success' | 'danger' | 'warning' | 'info'	-	Visual variant
message	string	-	Main message text
description	string	-	Optional description below the message
duration	number	4000	Auto-dismiss duration in milliseconds
showProgress	boolean	false	Show a thin bar that drains over duration
onClose	() => void	-	Callback when toast is closed
className	string	-	Additional CSS class name
style	CSSProperties	-	Additional inline styles