Toast

import { Toast } from "@/components/ui/toast";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Toast>Saved to your wishlist.</Toast>
      <Toast type="success">Order placed. Thank you, Nusrat!</Toast>
      <Toast type="warning">Only 2 tins left in stock.</Toast>
      <Toast type="error">We could not reach bKash. Try again.</Toast>
      <Toast theme="dark" type="success">Dark toast: parcel delivered.</Toast>
    </div>
  );
}

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Toast } from "@/components/ui/toast";

export default function Example() {
  const [items, setItems] = React.useState(["Sylhet green added.", "Masala chai added."]);
  return (
    <div style={{ display: "grid", gap: 12, width: 360 }}>
      {items.map(t => <Toast key={t} type="success" action={<Button size="sm" variant="ghost" onClick={() => setItems(s => s.filter(x => x !== t))}>Dismiss</Button>}>{t}</Toast>)}
      {items.length === 0 ? <Button variant="outline" onClick={() => setItems(["Sylhet green added.", "Masala chai added."])}>Bring them back</Button> : null}
    </div>
  );
}