Skip to Content
Dashflow Logo

Toaster Component

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

Overview

The Toaster component provides a container for managing and displaying toast notifications. It's designed to be placed at the root of your application to handle all toast notifications throughout the app.

Basic Usage

import { Toaster } from '@dashflowx/core'


export default function ToasterExample() {
  return (
    <Toaster />
  )
}

Preview:

Success
Your action was completed successfully.
Info
Here is some information for you.

Components

Toaster

The main toaster container component.

Examples

Basic Toaster

import { Toaster } from '@dashflowx/core'


export default function BasicToaster() {
  return (
    <Toaster />
  )
}

Preview:

Success
Your action was completed successfully.
Info
Here is some information for you.

Custom Styled Toaster

import { Toaster } from '@dashflowx/core'


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

Preview:

Success
Your action was completed successfully.
Info
Here is some information for you.

Toaster with Custom Position

import { Toaster } from '@dashflowx/core'


export default function ToasterWithCustomPosition() {
  return (
    <Toaster className="top-8 right-8" />
  )
}

Preview:

Success
Your action was completed successfully.
Info
Here is some information for you.

Toaster with Custom Theme

import { Toaster } from '@dashflowx/core'


export default function ToasterWithCustomTheme() {
  return (
    <Toaster className="bg-gray-900 text-white" />
  )
}

Preview:

Success
Your action was completed successfully.
Info
Here is some information for you.

Common Use Cases

App Root Toaster

// In your main App component
const App = () => {
  return (
    <div>
      {/* Your app content */}
      <Toaster />
    </div>
  );
};

Layout Toaster

// In your layout component
const Layout = ({ children }) => {
  return (
    <div>
      {children}
      <Toaster />
    </div>
  );
};

Page Level Toaster

// In a specific page component
const Page = () => {
  return (
    <div>
      {/* Page content */}
      <Toaster />
    </div>
  );
};
// In a modal component
const Modal = () => {
  return (
    <div className="modal">
      {/* Modal content */}
      <Toaster />
    </div>
  );
};

Best Practices

1. Single Toaster Instance

Use only one toaster instance per application.

// ✅ Good - Single instance
const App = () => (
  <div>
    <MainContent />
    <Toaster />
  </div>
);


// ❌ Avoid - Multiple instances
const App = () => (
  <div>
    <MainContent />
    <Toaster />
    <Toaster />
  </div>
);

2. Appropriate Positioning

Position the toaster appropriately for your layout.

// ✅ Good - Appropriate positioning
<Toaster className="top-4 right-4" />


// ❌ Avoid - Poor positioning
<Toaster className="bottom-0 left-0" />

3. Consistent Styling

Maintain consistent styling across your application.

// ✅ Good - Consistent styling
<Toaster className="standard-toaster-style" />


// ❌ Avoid - Inconsistent styling
<Toaster className="random-styles" />

4. Accessible Notifications

Ensure toaster notifications are accessible to all users.

// ✅ Good - Accessible
<Toaster />


// ❌ Avoid - Not accessible
<div>Toast notifications</div>

5. Proper Z-Index

Use appropriate z-index for toaster visibility.

// ✅ Good - Proper z-index
<Toaster className="z-50" />


// ❌ Avoid - Poor z-index
<Toaster className="z-0" />

Customization

Custom Styling

You can customize the toaster appearance using CSS classes:

<Toaster className="border border-gray-300 rounded-lg p-4" />

Different Themes

Use different themes for different contexts:

// Light theme
<Toaster className="bg-white border-gray-200" />


// Dark theme
<Toaster className="bg-gray-900 border-gray-700 text-white" />


// Brand theme
<Toaster className="bg-blue-50 border-blue-200" />

Position Variations

Use different positions for different layouts:

// Top right
<Toaster className="top-4 right-4" />


// Top left
<Toaster className="top-4 left-4" />


// Bottom right
<Toaster className="bottom-4 right-4" />


// Bottom left
<Toaster className="bottom-4 left-4" />

Advanced Usage

Dynamic Toaster Configuration

Configure toaster dynamically:

const [toasterConfig, setToasterConfig] = useState({});


useEffect(() => {
  // Load toaster configuration from settings
  loadToasterConfig().then(setToasterConfig);
}, []);

Conditional Toaster

Show toaster based on conditions:

const { user } = useAuth();


return (
  <div>
    <MainContent />
    {user && <Toaster />}
  </div>
);

Toaster with Custom Settings

Apply custom settings to toaster:

<Toaster 
  className="custom-toaster"
  position="top-right"
  duration={5000}
  maxToasts={3}
/>
  • Toast: For individual toast notifications
  • 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 Toaster API documentation.

Edit this page on GitHub
previousToast