Toast

import { useToast } from '@/components/ui/toast/use-toast'
import { Toaster } from '@/components/ui/toast/toaster'
import { ToastAction } from '@/components/ui/toast'
import { Button } from '@/components/ui/button'

export default function Example() {
  const { toast } = useToast()

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

      {/* With action button */}
      <Button
        onClick={() =>
          toast({
            title: 'Update Available',
            action: <ToastAction altText="Update">Update</ToastAction>,
          })
        }
      >
        Toast with Action
      </Button>

      {/* Don't forget the Toaster in your layout */}
      <Toaster />
    </>
  )
}