Toast

A temporary notification component that appears in the bottom-right corner of the viewport. Supports default (success) and destructive (error) variants with automatic icon selection and auto-dismiss after a configurable duration. Use with ToastProvider and useGlobalToast for application-wide toast management.

Import

import { Toast, ToastProvider, useGlobalToast } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

With ToastProvider (recommended)

Wrap your application with ToastProvider and use the useGlobalToast hook to trigger toasts from any component.

// App root
<ToastProvider>
  <App />
</ToastProvider>

// Any component
const { toast, success, error } = useGlobalToast();

// Using the toast function
toast({
  title: 'Changes saved',
  description: 'Your settings have been updated.',
  variant: 'default',
});

// Using convenience methods
success('Saved', 'Your changes have been saved.');
error('Error', 'Failed to save changes.');

Standalone

<Toast
  title="Booking confirmed"
  description="You will receive a confirmation email shortly."
  variant="default"
  duration={5000}
  onClose={() => console.log('closed')}
/>

Props

Toast

Prop	Type	Default	Description
`title`*	string	-	Primary notification text.
`description`	string \| ReactNode	-	Secondary text displayed below the title.
`variant`	'default' \| 'destructive'	`'default'`	Visual variant. "default" shows a success style, "destructive" shows an error style.
`duration`	number	`3000`	Auto-dismiss duration in milliseconds. Set to 0 to disable auto-dismiss.
`onClose`	() => void	-	Callback when the toast is dismissed (auto or manual).
`redirect`	string	-	URL for an optional "Go to page" link appended to the description.

useGlobalToast

Returns an object with the following methods:

Prop	Type	Default	Description
`toast`	(options: ToastOptions) => void	-	Show a toast with full configuration (title, description, variant, duration, redirect).
`success`	(title: string, description?: string) => void	-	Convenience method to show a default (success) toast.
`error`	(title: string, description?: string) => void	-	Convenience method to show a destructive (error) toast.