Skip to Content
Dashflow Logo

Sonner Component

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

Overview

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

Basic Usage

import { Sonner } from '@dashflowx/core'


export default function SonnerExample() {
  return (
    <Sonner />
  )
}

Preview:

Event has been created
Sunday, December 03, 2023 at 9:00 AM

Components

Sonner

The main sonner component with toast functionality.

SonnerComp

The underlying sonner implementation.

Examples

Basic Toast

import { Sonner } from '@dashflowx/core'


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

Preview:

Event has been created
Sunday, December 03, 2023 at 9:00 AM

Custom Styled Toast

import { Sonner } from '@dashflowx/core'


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

Preview:

Event has been created
Sunday, December 03, 2023 at 9:00 AM

Success Toast

import { toast } from 'sonner'


export default function SuccessToast() {
  return (
    <button onClick={() => toast.success('Operation completed successfully!')}>
      Show Success Toast
    </button>
  )
}

Error Toast

import { toast } from 'sonner'


export default function ErrorToast() {
  return (
    <button onClick={() => toast.error('Something went wrong!')}>
      Show Error Toast
    </button>
  )
}

Warning Toast

import { toast } from 'sonner'


export default function WarningToast() {
  return (
    <button onClick={() => toast.warning('Please check your input!')}>
      Show Warning Toast
    </button>
  )
}

Info Toast

import { toast } from 'sonner'


export default function InfoToast() {
  return (
    <button onClick={() => toast.info('New update available!')}>
      Show Info Toast
    </button>
  )
}

Common Use Cases

Success Notifications

const successNotification = (
  <button onClick={() => toast.success('Data saved successfully!')}>
    Save Data
  </button>
);

Error Notifications

const errorNotification = (
  <button onClick={() => toast.error('Failed to save data!')}>
    Save Data
  </button>
);

Form Validation

const formValidation = (
  <button onClick={() => toast.error('Please fill in all required fields!')}>
    Submit Form
  </button>
);

Action Confirmations

const actionConfirmation = (
  <button onClick={() => toast.success('Item deleted successfully!')}>
    Delete Item
  </button>
);

Best Practices

1. Clear Messages

Use clear and concise toast messages.

// ✅ Good - Clear message
toast.success('Data saved successfully!')


// ❌ Avoid - Unclear message
toast.success('Done')

2. Appropriate Duration

Set appropriate duration for different types of messages.

// ✅ Good - Appropriate duration
toast.success('Quick action completed!', { duration: 2000 })
toast.error('Important error!', { duration: 5000 })


// ❌ Avoid - Too short or too long
toast.success('Message', { duration: 100 })
toast.error('Error', { duration: 30000 })

3. Consistent Styling

Maintain consistent styling across toast notifications.

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


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

4. Accessible Notifications

Ensure toast notifications are accessible to all users.

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


// ❌ Avoid - Not accessible
toast.success('Message')

5. Appropriate Positioning

Use appropriate positioning for toast notifications.

// ✅ Good - Appropriate positioning
toast.success('Message', { position: 'top-right' })


// ❌ Avoid - Poor positioning
toast.success('Message', { position: 'bottom-left' })

Customization

Custom Styling

You can customize the toast appearance using CSS classes:

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

Different Themes

Use different themes for different contexts:

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


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


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

Size Variations

Use different sizes for different emphasis levels:

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


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


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

Advanced Usage

Dynamic Toast Content

Create dynamic toast content:

const showDynamicToast = (userName) => {
  toast.success(`Welcome back, ${userName}!`);
};

Toast with Actions

Add actions to toast notifications:

toast.success('File uploaded successfully!', {
  action: {
    label: 'View',
    onClick: () => navigate('/files')
  }
});

Custom Toast Components

Create custom toast components:

const CustomToast = ({ message, type }) => {
  return (
    <div className={`toast toast-${type}`}>
      <span>{message}</span>
    </div>
  );
};


toast.custom(<CustomToast message="Custom message" type="success" />);
  • Toast: For 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 Sonner API documentation.

Edit this page on GitHub
previousSlider