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

Navigation