Toast

Notification messages that appear temporarily.

tsx
import { ToastProvider, useToast } from '@xdev-asia/x-ui-react';
tsx
// Wrap app with ToastProvider
<ToastProvider>
  <App />
</ToastProvider>

// Use hook in component
const { toast } = useToast();

toast({
  title: 'Success!',
  description: 'Your changes have been saved.',
  variant: 'success',
});

Toast Options

  • title - Toast title
  • description - Toast description
  • variant - 'default' | 'success' | 'error' | 'warning'
  • duration - Display duration in ms