Toast

1const BasicToast = () => (
2  <>
3    <button
4      type="button"
5      onClick={() =>
6        showToast({ title: "Saved", description: "Your changes were saved." })
7      }
8    >
9      Show info toast
10    </button>
11    <button
12      type="button"
13      onClick={() => showToast({ title: "Published", variant: "success" })}
14    >
15      Show success toast
16    </button>
17    <button
18      type="button"
19      onClick={() =>
20        showToast({ title: "Reservation expires soon", variant: "warning" })
21      }
22    >
23      Show warning toast
24    </button>
25    <button
26      type="button"
27      onClick={() => showToast({ title: "Failed to save", variant: "error" })}
28    >
29      Show error toast
30    </button>
31    <button
32      type="button"
33      onClick={() =>
34        showToast({
35          title: "Structure moved",
36          action: {
37            label: "Undo",
38            onClick: () => showToast({ title: "Move undone" }),
39          },
40        })
41      }
42    >
43      Show toast with an action
44    </button>
45    <Toast />
46  </>
47);
48
49render(<BasicToast />);