Toaster

1
2
3
4
5
6
7
8

<div className="space-y-4">
  <Button onClick={() => toast("This is a basic toast notification")}>
    Show Basic Toast
  </Button>
  <p className="text-sm text-gray-600">
    Click the button above to trigger a basic toast notification
  </p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div className="space-y-4">
  <div className="flex flex-wrap gap-2">
    <Button onClick={() => toast.success("Success! Your action was completed.")}>
      Success Toast
    </Button>
    <Button onClick={() => toast.error("Error! Something went wrong.")}>Error Toast</Button>
    <Button onClick={() => toast.warning("Warning! Please check your input.")}>
      Warning Toast
    </Button>
    <Button onClick={() => toast.info("Info: Here's some helpful information.")}>
      Info Toast
    </Button>
  </div>
  <p className="text-sm text-gray-600">Different toast types for different scenarios</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div className="space-y-4">
  <Button
    onClick={() =>
      toast("User Updated", {
        description:
          "The user profile has been successfully updated with the new information.",
      })
    }
  >
    Toast with Description
  </Button>
  <p className="text-sm text-gray-600">
    Toasts can include both a title and description for more detailed information
  </p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div className="space-y-4">
  <div className="flex flex-wrap gap-2">
    <Button
      onClick={() =>
        toast("Undo Changes", {
          description: "Your changes have been saved.",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo clicked"),
          },
        })
      }
    >
      Toast with Action
    </Button>
    <Button
      onClick={() =>
        toast("Confirm Deletion", {
          description: "Are you sure you want to delete this item?",
          action: {
            label: "Delete",
            onClick: () => console.log("Delete confirmed"),
          },
          cancel: {
            label: "Cancel",
            onClick: () => console.log("Delete cancelled"),
          },
        })
      }
      variant="destructive"
    >
      Toast with Action & Cancel
    </Button>
  </div>
  <p className="text-sm text-gray-600">
    Toasts can include action buttons for user interaction
  </p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div className="space-y-4">
  <div className="flex flex-wrap gap-2">
    <Button
      onClick={() =>
        toast("Persistent Message", {
          duration: Number.POSITIVE_INFINITY, // Never auto-dismiss
          closeButton: true,
        })
      }
    >
      Persistent Toast
    </Button>
  </div>
  <p className="text-sm text-gray-600">
    Control how long toasts stay visible with the duration option
  </p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div className="space-y-4">
  <Button
    onClick={() => {
      toast.promise(new Promise((resolve) => setTimeout(resolve, 2000)), {
        loading: "Saving your changes...",
        success: "Changes saved successfully!",
        error: "Failed to save changes",
      });
    }}
  >
    Promise Toast
  </Button>
  <p className="text-sm text-gray-600">
    Show loading, success, and error states for async operations
  </p>
</div>