Toast

1<!-- @import { Toast } from ../../lib/maddex -->
2
3<div class="flex gap-2">
4  <button onclick="addToast('success')">Success</button>
5</div>
6
7<Toast toasts="{toasts}" onChange="{setToasts}" />
8
9<script>
10  const [toasts, setToasts] = pp.state([]);
11
12  function addToast(type) {
13    const newToast = {
14      id: Date.now(),
15      type: type,
16      description: "This is a reactive toast message",
17      open: true
18    };
19    setToasts((prev) => [newToast, ...prev]);
20  }
21</script>