Toast Message

Brief, temporary notifications that confirm actions or provide feedback without interrupting the workflow.

@volvo-cars/css v2.5.1@volvo-cars/react-messages v0.5.1

Toast With Action

Show codeHide code

import { toast } from './ToastPageRoot';

export function ToastWithAction() {
  return (
    <div>
      <button
        type="button"
        className="button-filled"
        onClick={() => {
          const id = toast.negative({
            message: 'Item removed from cart',
            actionLabel: 'Undo',
            onAction: () => {
              toast.remove(id);
              toast.positive({ message: 'Item restored', timeout: 2500 });
            },
          });
        }}
      >
        Remove item
      </button>
    </div>
  );
}

Toast With Loading

Show codeHide code

import { toast } from './ToastPageRoot';

export function ToastWithLoading() {
  return (
    <div>
      <button
        type="button"
        className="button-filled"
        onClick={() => {
          const id = toast.neutral({
            message: 'Uploading file...',
            loading: true,
            closeLabel: 'Cancel',
            onClose: () => toast.remove(id),
          });

          // Simulate upload completion
          setTimeout(() => {
            toast.remove(id);
            toast.positive({ message: 'Upload complete', timeout: 3000 });
          }, 3000);
        }}
      >
        Upload file
      </button>
    </div>
  );
}

Persistent Toast

Show codeHide code

import { toast } from './ToastPageRoot';

export function PersistentToast() {
  return (
    <div>
      <button
        type="button"
        className="button-filled"
        onClick={() => {
          toast.negative({
            message: 'Connection lost. Check your network.',
            closeLabel: 'Dismiss',
          });
        }}
      >
        Show persistent toast
      </button>
    </div>
  );
}