Skip to Content
Dashflow Logo

Toast Component

A comprehensive guide to using the Toast component with examples, props, and best practices.

Overview

The Toast component provides a notification system that displays temporary messages to users. It's designed for success messages, error notifications, and other temporary feedback with action buttons.

Basic Usage

import { Toast } from '@dashflowx/core'


export default function ToastExample() {
  return (
    <Toast />
  )
}

Preview:

Scheduled: Catch up
Friday, February 10, 2023 at 5:57 PM

Components

Toast

The main toast component with notification functionality.

ToastAction

Action button within the toast.

ToastClose

Close button for the toast.

ToastComp

The underlying toast implementation.

ToastDescription

Description text for the toast.

ToastProvider

Provider for toast context.

ToastTitle

Title text for the toast.

ToastViewport

Viewport for rendering toasts.

Examples

Basic Toast

import { Toast } from '@dashflowx/core'


export default function BasicToast() {
  return (
    <Toast />
  )
}

Preview:

Scheduled: Catch up
Friday, February 10, 2023 at 5:57 PM

Custom Styled Toast

import { Toast } from '@dashflowx/core'


export default function CustomStyledToast() {
  return (
    <Toast className="border border-blue-500 rounded-lg p-4" />
  )
}

Preview:

Scheduled: Catch up
Friday, February 10, 2023 at 5:57 PM

Success Toast

import { useToast } from '@/lib/use-toast'


export default function SuccessToast() {
  const { toast } = useToast();


  return (
    <button onClick={() => toast({
      title: 'Success!',
      description: 'Your changes have been saved.',
    })}>
      Show Success Toast
    </button>
  )
}

Error Toast

import { useToast } from '@/lib/use-toast'


export default function ErrorToast() {
  const { toast } = useToast();


  return (
    <button onClick={() => toast({
      title: 'Error!',
      description: 'Something went wrong.',
      variant: 'destructive',
    })}>
      Show Error Toast
    </button>
  )
}

Toast with Action

import { useToast } from '@/lib/use-toast'
import { ToastAction } from '@dashflowx/core'


export default function ToastWithAction() {
  const { toast } = useToast();


  return (
    <button onClick={() => toast({
      title: 'File uploaded',
      description: 'Your file has been uploaded successfully.',
      action: (
        <ToastAction altText="View file">View</ToastAction>
      ),
    })}>
      Show Toast with Action
    </button>
  )
}

Common Use Cases

Success Notifications

const successNotification = (
  <button onClick={() => toast({
    title: 'Success!',
    description: 'Data saved successfully!',
  })}>
    Save Data
  </button>
);

Error Notifications

const errorNotification = (
  <button onClick={() => toast({
    title: 'Error!',
    description: 'Failed to save data!',
    variant: 'destructive',
  })}>
    Save Data
  </button>
);

Action Confirmations

const actionConfirmation = (
  <button onClick={() => toast({
    title: 'Item deleted',
    description: 'The item has been deleted.',
    action: (
      <ToastAction altText="Undo delete">Undo</ToastAction>
    ),
  })}>
    Delete Item
  </button>
);

Form Validation

const formValidation = (
  <button onClick={() => toast({
    title: 'Validation Error',
    description: 'Please fill in all required fields!',
    variant: 'destructive',
  })}>
    Submit Form
  </button>
);

Best Practices

1. Clear Messages

Use clear and concise toast messages.

// ✅ Good - Clear message
toast({
  title: 'Data saved successfully!',
  description: 'Your changes have been applied.'
})


// ❌ Avoid - Unclear message
toast({
  title: 'Done',
  description: 'OK'
})

2. Appropriate Duration

Set appropriate duration for different types of messages.

// ✅ Good - Appropriate duration
toast({
  title: 'Quick action completed!',
  duration: 2000
})


// ❌ Avoid - Too short or too long
toast({
  title: 'Message',
  duration: 100
})

3. Consistent Styling

Maintain consistent styling across toast notifications.

// ✅ Good - Consistent styling
toast({
  title: 'Message',
  className: 'standard-toast-style'
})


// ❌ Avoid - Inconsistent styling
toast({
  title: 'Message',
  className: 'random-styles'
})

4. Accessible Notifications

Ensure toast notifications are accessible to all users.

// ✅ Good - Accessible
toast({
  title: 'Message',
  description: 'Additional context for screen readers'
})


// ❌ Avoid - Not accessible
toast({
  title: 'Message'
})

5. Appropriate Actions

Use appropriate actions for different contexts.

// ✅ Good - Appropriate action
toast({
  title: 'File uploaded',
  action: <ToastAction altText="View file">View</ToastAction>
})


// ❌ Avoid - Inappropriate action
toast({
  title: 'Success',
  action: <ToastAction altText="Random">Random</ToastAction>
})

Customization

Custom Styling

You can customize the toast appearance using CSS classes:

toast({
  title: 'Message',
  className: 'border border-gray-300 rounded-lg p-4'
})

Different Themes

Use different themes for different contexts:

// Light theme
toast({
  title: 'Message',
  className: 'bg-white border-gray-200'
})


// Dark theme
toast({
  title: 'Message',
  className: 'bg-gray-900 border-gray-700 text-white'
})


// Brand theme
toast({
  title: 'Message',
  className: 'bg-blue-50 border-blue-200'
})

Size Variations

Use different sizes for different emphasis levels:

// Small toast
toast({
  title: 'Message',
  className: 'text-sm'
})


// Standard toast
toast({
  title: 'Message',
  className: 'text-base'
})


// Large toast
toast({
  title: 'Message',
  className: 'text-lg'
})

Advanced Usage

Dynamic Toast Content

Create dynamic toast content:

const showDynamicToast = (userName) => {
  toast({
    title: `Welcome back, ${userName}!`,
    description: 'You have 3 new messages.'
  });
};

Toast with Custom Actions

Add custom actions to toast notifications:

toast({
  title: 'File uploaded successfully!',
  action: (
    <ToastAction altText="View file" onClick={() => navigate('/files')}>
      View
    </ToastAction>
  )
});

Multiple Toast Types

Use different toast variants:

const showToast = (type, message) => {
  toast({
    title: message,
    variant: type // 'default', 'destructive', 'success'
  });
};
  • Toaster: For toast container
  • Alert: For alert messages
  • Notification: For notifications
  • Button: For toast triggers
  • Icon: For toast icons

API Reference

For the complete API reference and advanced usage patterns, see the Toast API documentation.

Edit this page on GitHub
previousSonner