Toast

Notification components with different variants.

Toast Examples

Default Toast

Notification

This is a default notification.

Success Toast

Success!

Your action was completed successfully.

Error Toast

Error!

There was an error processing your request.

Warning Toast

Warning!

Please be aware of this important notice.

Info Toast

Information

Here's some information you might find useful.

Toast Container

Usage

import { Toast } from "@/components/toast"
import { ToastProvider, useToast } from "@/components/toast-container"

// For a single toast:
export default function MyComponent() {
  return (
    <Toast 
      title="Success!" 
      description="Your action was completed successfully."
      variant="success"
    />
  )
}

// For multiple toasts with the toast container:
export default function MyApp() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  )
}

// To show toasts programmatically:
function MyComponent() {
  const { addToast } = useToast()
  
  const showToast = () => {
    addToast({
      title: "Success!",
      description: "Your action was completed successfully.",
      variant: "success",
    })
  }
  
  return (
    <Button onClick={showToast}>
      Show Toast
    </Button>
  )
}