sonner

1<script lang="ts" setup>
2import type { ToasterProps } from "vue-sonner"
3import { reactiveOmit } from "@vueuse/core"
4import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
5import { Toaster as Sonner } from "vue-sonner"
6 
7const props = defineProps<ToasterProps>()
8const delegatedProps = reactiveOmit(props, "toastOptions")
9</script>
10 
11<template>
12  <Sonner
13    class="toaster group"
14    :toast-options="{
15      classes: {
16        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
17        description: 'group-[.toast]:text-muted-foreground',
18        actionButton:
19          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
20        cancelButton:
21          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
22      },
23    }"
24    v-bind="delegatedProps"
25  >
26    <template #success-icon>
27      <CircleCheckIcon class="size-4" />
28    </template>
29    <template #info-icon>
30      <InfoIcon class="size-4" />
31    </template>
32    <template #warning-icon>
33      <TriangleAlertIcon class="size-4" />
34    </template>
35    <template #error-icon>
36      <OctagonXIcon class="size-4" />
37    </template>
38    <template #loading-icon>
39      <div>
40        <Loader2Icon class="size-4 animate-spin" />
41      </div>
42    </template>
43    <template #close-icon>
44      <XIcon class="size-4" />
45    </template>
46  </Sonner>
47</template>