Toast

// app/layout.tsx
import { ToastProvider } from 'fxui-core';

export default function Layout({ children }) {
  return <ToastProvider>{children}</ToastProvider>;
}

import { useToast } from 'fxui-core';

function MyComponent() {
  const { toast } = useToast();

  return (
    <Button onClick={() => toast({ title: 'Saved!', variant: 'success' })}>
      Save
    </Button>
  );
}

toast({ title: 'Default notification' });
toast({ variant: 'success', title: 'Saved!', description: 'Your changes were saved.' });
toast({ variant: 'error', title: 'Error', description: 'Something went wrong.' });
toast({ variant: 'warning', title: 'Warning', description: 'Disk space running low.' });
toast({ variant: 'info', title: 'Update available', description: 'v2.0 is ready.' });

toast({
  title: 'File deleted',
  description: 'report.pdf was moved to trash.',
  action: {
    label: 'Undo',
    onClick: () => restoreFile(),
  },
});

toast({ title: 'Quick flash', duration: 1500 });
toast({ title: 'Read this carefully', duration: 8000 });