Dottiv1.1
← Components

Toast

Component

Positioned notification component for user feedback with auto-dismiss functionality.

Installation & Usage

Basic Usage
import { Toast } from 'dotti'

<Toast
  variant="success"
  message="Operation completed!"
  onClose={() => setToastVisible(false)}
/>

Examples

Toast Variants

Different toast types for various notification scenarios.

Code
<Toast
  variant="success"
  title="Success!"
  message="Your action was completed successfully."
  onClose={() => setToastVisible(false)}
/>

<Toast
  variant="error"
  title="Error!"
  message="Something went wrong. Please try again."
  onClose={() => setToastVisible(false)}
/>

<Toast
  variant="warning"
  title="Warning!"
  message="Please review your input before continuing."
  onClose={() => setToastVisible(false)}
/>

<Toast
  variant="info"
  title="Info"
  message="Here's some helpful information for you."
  onClose={() => setToastVisible(false)}
/>

Toast Positions

Control where toasts appear on the screen.

Toast can be positioned at different corners:
Code
<Toast
  variant="info"
  message="Toast positioned at top-right"
  position="top-right"
  onClose={() => setToastVisible(false)}
/>

<Toast
  variant="success"
  message="Toast positioned at bottom-left"
  position="bottom-left"
  onClose={() => setToastVisible(false)}
/>

<Toast
  variant="warning" 
  message="Toast positioned at top-left"
  position="top-left"
  onClose={() => setToastVisible(false)}
/>

<Toast
  variant="error"
  message="Toast positioned at bottom-right"
  position="bottom-right"
  onClose={() => setToastVisible(false)}
/>

Auto-dismiss and Actions

Toasts with automatic dismissal and action buttons.

Code
<Toast
  variant="info"
  title="Update Available"
  message="A new version is available. Update now?"
  duration={null} // Disable auto-dismiss
  actions={[
    {
      label: 'Update Now',
      onClick: () => handleUpdate()
    },
    {
      label: 'Later',
      onClick: () => dismissToast(),
      variant: 'ghost'
    }
  ]}
  onClose={() => setToastVisible(false)}
/>

Simple Toast Usage

Minimal toast for quick feedback messages.

Simple toast without title or actions:
Code
<Toast
  message="File saved successfully!"
  variant="success"
  duration={3000}
  onClose={() => setToastVisible(false)}
/>

Props