Toast

A non-intrusive notification component that provides brief messages to the user.

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const props = defineProps<{
  duration?: number
}>()

const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, duration: props.duration })

const createToast = () => {
  toaster.create({
    title: 'Title',
    description: 'Description',
    type: 'info',
  })
}
</script>

<template>
  <button @click="createToast">Create Toast</button>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.ActionTrigger>Action</Toast.ActionTrigger>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

interface BasicProps {
  duration?: number
}

export function Basic(props: BasicProps = {}) {
  const toaster = useMemo(
    () => createToaster({ placement: 'bottom-end', overlap: true, gap: 24, duration: props.duration }),
    [props.duration],
  )

  const createToast = () => {
    toaster.create({
      title: 'Title',
      description: 'Description',
      type: 'info',
    })
  }

  return (
    <>
      <button type="button" onClick={createToast}>Create Toast</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root key={toast.id}>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.ActionTrigger>Action</Toast.ActionTrigger>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'
import { XIcon } from 'lucide-solid'

export function Basic() {
  const toaster = createToaster({
    placement: 'bottom-end',
    gap: 24,
  })

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          toaster.create({
            title: 'Loading!',
            description: 'We are loading something for you. Please wait.',
            type: 'info',
          })}
      >
        Add Toast
      </button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>
              <XIcon />
            </Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

<script module lang="ts">
  export interface BasicProps {
    duration?: number
  }
</script>

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  let { duration }: BasicProps = $props()

  const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24 })
</script>

{#snippet title()}Title{/snippet}
{#snippet description()}Description{/snippet}

<button type="button" onclick={() => toaster.create({ title, description, type: 'info', duration })}>Create Toast</button>

<Toaster {toaster}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.ActionTrigger>Action</Toast.ActionTrigger>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Anatomy

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const toaster = createToaster({ placement: 'bottom-end' })
</script>

<template>
  <button type="button" @click="toaster.create({ title: 'Upload complete', description: 'Your file is ready.' })">
    Create toast
  </button>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.ActionTrigger>Undo</Toast.ActionTrigger>
      <Toast.CloseTrigger>Close</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo } from 'react'
import { Toast, Toaster, createToaster } from '@destyler-ui/react'

export default function Basic() {
  const toaster = useMemo(() => createToaster({ placement: 'bottom-end' }), [])

  return (
    <>
      <button type="button" onClick={() => toaster.create({ title: 'Upload complete', description: 'Your file is ready.' })}>
        Create toast
      </button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root key={toast.id}>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.ActionTrigger>Undo</Toast.ActionTrigger>
            <Toast.CloseTrigger>Close</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { Toast, Toaster, createToaster } from '@destyler-ui/solid'

export default function Basic() {
  const toaster = createToaster({ placement: 'bottom-end' })

  return (
    <>
      <button type="button" onClick={() => toaster.create({ title: 'Upload complete', description: 'Your file is ready.' })}>
        Create toast
      </button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.ActionTrigger>Undo</Toast.ActionTrigger>
            <Toast.CloseTrigger>Close</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  const toaster = createToaster({
    placement: 'bottom-end',
    overlap: true,
    gap: 24,
  })
</script>

{#snippet title()}Upload complete{/snippet}
{#snippet description()}Your file is ready.{/snippet}

<button
  type="button"
  onclick={() => toaster.create({ title, description, type: 'info' })}
>
  Create toast
</button>

<Toaster {toaster}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.ActionTrigger>Undo</Toast.ActionTrigger>
      <Toast.CloseTrigger>Close</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Examples

Basic

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const props = defineProps<{
  duration?: number
}>()

const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24, duration: props.duration })

const createToast = () => {
  toaster.create({
    title: 'Title',
    description: 'Description',
    type: 'info',
  })
}
</script>

<template>
  <button @click="createToast">Create Toast</button>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.ActionTrigger>Action</Toast.ActionTrigger>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

interface BasicProps {
  duration?: number
}

export function Basic(props: BasicProps = {}) {
  const toaster = useMemo(
    () => createToaster({ placement: 'bottom-end', overlap: true, gap: 24, duration: props.duration }),
    [props.duration],
  )

  const createToast = () => {
    toaster.create({
      title: 'Title',
      description: 'Description',
      type: 'info',
    })
  }

  return (
    <>
      <button type="button" onClick={createToast}>Create Toast</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root key={toast.id}>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.ActionTrigger>Action</Toast.ActionTrigger>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'
import { XIcon } from 'lucide-solid'

export function Basic() {
  const toaster = createToaster({
    placement: 'bottom-end',
    gap: 24,
  })

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          toaster.create({
            title: 'Loading!',
            description: 'We are loading something for you. Please wait.',
            type: 'info',
          })}
      >
        Add Toast
      </button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>
              <XIcon />
            </Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

<script module lang="ts">
  export interface BasicProps {
    duration?: number
  }
</script>

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  let { duration }: BasicProps = $props()

  const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24 })
</script>

{#snippet title()}Title{/snippet}
{#snippet description()}Description{/snippet}

<button type="button" onclick={() => toaster.create({ title, description, type: 'info', duration })}>Create Toast</button>

<Toaster {toaster}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.ActionTrigger>Action</Toast.ActionTrigger>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Toast Types

Display different toast types (success, error, warning, info).

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const props = defineProps<{
  duration?: number
}>()

const toaster = createToaster({ placement: 'bottom-end', duration: props.duration })

const createSuccess = () => {
  toaster.success({
    title: 'Success Toast',
    description: 'Operation completed successfully',
  })
}

const createError = () => {
  toaster.error({
    title: 'Error Toast',
    description: 'Something went wrong',
  })
}

const createLoading = () => {
  toaster.loading({
    title: 'Loading Toast',
    description: 'Please wait...',
  })
}

const createInfo = () => {
  toaster.create({
    title: 'Info Toast',
    description: 'Here is some information',
    type: 'info',
  })
}
</script>

<template>
  <button @click="createSuccess">Success</button>
  <button @click="createError">Error</button>
  <button @click="createLoading">Loading</button>
  <button @click="createInfo">Info</button>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

interface ToastTypesProps {
  duration?: number
}

export function ToastTypes(props: ToastTypesProps = {}) {
  const toaster = useMemo(
    () => createToaster({ placement: 'bottom-end', duration: props.duration }),
    [props.duration],
  )

  const createSuccess = () => {
    toaster.success({
      title: 'Success Toast',
      description: 'Operation completed successfully',
    })
  }

  const createError = () => {
    toaster.error({
      title: 'Error Toast',
      description: 'Something went wrong',
    })
  }

  const createLoading = () => {
    toaster.loading({
      title: 'Loading Toast',
      description: 'Please wait...',
    })
  }

  const createInfo = () => {
    toaster.create({
      title: 'Info Toast',
      description: 'Here is some information',
      type: 'info',
    })
  }

  return (
    <>
      <button type="button" onClick={createSuccess}>Success</button>
      <button type="button" onClick={createError}>Error</button>
      <button type="button" onClick={createLoading}>Loading</button>
      <button type="button" onClick={createInfo}>Info</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'

export function ToastTypes() {
  const toaster = createToaster({ placement: 'bottom-end' })

  const createSuccess = () => {
    toaster.success({
      title: 'Success Toast',
      description: 'Operation completed successfully',
    })
  }

  const createError = () => {
    toaster.error({
      title: 'Error Toast',
      description: 'Something went wrong',
    })
  }

  const createLoading = () => {
    toaster.loading({
      title: 'Loading Toast',
      description: 'Please wait...',
    })
  }

  const createInfo = () => {
    toaster.create({
      title: 'Info Toast',
      description: 'Here is some information',
      type: 'info',
    })
  }

  return (
    <>
      <button type="button" onClick={createSuccess}>Success</button>
      <button type="button" onClick={createError}>Error</button>
      <button type="button" onClick={createLoading}>Loading</button>
      <button type="button" onClick={createInfo}>Info</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

<script module lang="ts">
  export interface ToastTypesProps {
    duration?: number
  }
</script>

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  let { duration }: ToastTypesProps = $props()

  const toaster = createToaster({ placement: 'bottom-end' })
</script>

{#snippet successTitle()}Success Toast{/snippet}
{#snippet successDescription()}Operation completed successfully{/snippet}
{#snippet errorTitle()}Error Toast{/snippet}
{#snippet errorDescription()}Something went wrong{/snippet}
{#snippet loadingTitle()}Loading Toast{/snippet}
{#snippet loadingDescription()}Please wait...{/snippet}
{#snippet infoTitle()}Info Toast{/snippet}
{#snippet infoDescription()}Here is some information{/snippet}

<button type="button" onclick={() => toaster.success({ title: successTitle, description: successDescription, duration })}>
  Success
</button>
<button type="button" onclick={() => toaster.error({ title: errorTitle, description: errorDescription, duration })}>Error</button>
<button type="button" onclick={() => toaster.loading({ title: loadingTitle, description: loadingDescription, duration })}>
  Loading
</button>
<button type="button" onclick={() => toaster.create({ title: infoTitle, description: infoDescription, type: 'info', duration })}>
  Info
</button>

<Toaster {toaster}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Toast Action

Add action buttons to toast notifications.

<script setup lang="ts">
import { ref } from 'vue'
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const props = defineProps<{
  duration?: number
}>()

const toaster = createToaster({ placement: 'bottom-end', duration: props.duration })
const actionTriggered = ref(false)

const createToast = () => {
  actionTriggered.value = false
  toaster.create({
    title: 'File deleted',
    description: 'The file has been deleted',
    type: 'info',
  })
}

const handleAction = () => {
  actionTriggered.value = true
}
</script>

<template>
  <button @click="createToast">Create Toast</button>
  <div v-if="actionTriggered">Action triggered!</div>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.ActionTrigger @click="handleAction">Undo</Toast.ActionTrigger>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo, useState } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

interface ToastActionProps {
  duration?: number
}

export function ToastAction(props: ToastActionProps = {}) {
  const toaster = useMemo(() => createToaster({ placement: 'bottom-end' }), [])
  const [actionTriggered, setActionTriggered] = useState(false)

  const createToast = () => {
    setActionTriggered(false)
    toaster.create({
      title: 'File deleted',
      description: 'The file has been deleted',
      type: 'info',
      duration: props.duration,
    })
  }

  const handleAction = () => {
    setActionTriggered(true)
  }

  return (
    <>
      <button type="button" onClick={createToast}>Create Toast</button>
      {actionTriggered && <div>Action triggered!</div>}
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.ActionTrigger onClick={handleAction}>Undo</Toast.ActionTrigger>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'
import { createSignal, Show } from 'solid-js'

export function ToastAction() {
  const toaster = createToaster({ placement: 'bottom-end' })
  const [actionTriggered, setActionTriggered] = createSignal(false)

  const createToast = () => {
    setActionTriggered(false)
    toaster.create({
      title: 'File deleted',
      description: 'The file has been deleted',
      type: 'info',
    })
  }

  return (
    <>
      <button type="button" onClick={createToast}>Create Toast</button>
      <Show when={actionTriggered()}>
        <div>Action triggered!</div>
      </Show>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.ActionTrigger onClick={() => setActionTriggered(true)}>Undo</Toast.ActionTrigger>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

<script module lang="ts">
  export interface ToastActionProps {
    duration?: number
  }
</script>

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  let { duration }: ToastActionProps = $props()

  const toaster = createToaster({ placement: 'bottom-end' })
  let actionTriggered = $state(false)

  function createToast() {
    actionTriggered = false
    toaster.create({ title, description, type: 'info', duration })
  }
</script>

{#snippet title()}File deleted{/snippet}
{#snippet description()}The file has been deleted{/snippet}

<button type="button" onclick={createToast}>Create Toast</button>
{#if actionTriggered}<div>Action triggered!</div>{/if}

<Toaster {toaster}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.ActionTrigger onclick={() => (actionTriggered = true)}>Undo</Toast.ActionTrigger>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Toast Placement

Configure the toast placement position.

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const toasterTopStart = createToaster({ placement: 'top-start' })
const toasterBottomEnd = createToaster({ placement: 'bottom-end' })

const createTopStart = () => {
  toasterTopStart.create({
    title: 'Top Start Toast',
    description: 'This toast appears at top-start',
    type: 'info',
  })
}

const createBottomEnd = () => {
  toasterBottomEnd.create({
    title: 'Bottom End Toast',
    description: 'This toast appears at bottom-end',
    type: 'info',
  })
}
</script>

<template>
  <button @click="createTopStart">Top Start</button>
  <button @click="createBottomEnd">Bottom End</button>
  <Toaster :toaster="toasterTopStart" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
  <Toaster :toaster="toasterBottomEnd" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

export function ToastPlacement() {
  const toasterTopStart = useMemo(() => createToaster({ placement: 'top-start' }), [])
  const toasterBottomEnd = useMemo(() => createToaster({ placement: 'bottom-end' }), [])

  const createTopStart = () => {
    toasterTopStart.create({
      title: 'Top Start Toast',
      description: 'This toast appears at top-start',
      type: 'info',
    })
  }

  const createBottomEnd = () => {
    toasterBottomEnd.create({
      title: 'Bottom End Toast',
      description: 'This toast appears at bottom-end',
      type: 'info',
    })
  }

  return (
    <>
      <button type="button" onClick={createTopStart}>Top Start</button>
      <button type="button" onClick={createBottomEnd}>Bottom End</button>
      <Toaster toaster={toasterTopStart}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
      <Toaster toaster={toasterBottomEnd}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'

export function ToastPlacement() {
  const toasterTopStart = createToaster({ placement: 'top-start' })
  const toasterBottomEnd = createToaster({ placement: 'bottom-end' })

  const createTopStart = () => {
    toasterTopStart.create({
      title: 'Top Start Toast',
      description: 'This toast appears at top-start',
      type: 'info',
    })
  }

  const createBottomEnd = () => {
    toasterBottomEnd.create({
      title: 'Bottom End Toast',
      description: 'This toast appears at bottom-end',
      type: 'info',
    })
  }

  return (
    <>
      <button type="button" onClick={createTopStart}>Top Start</button>
      <button type="button" onClick={createBottomEnd}>Bottom End</button>
      <Toaster toaster={toasterTopStart}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
      <Toaster toaster={toasterBottomEnd}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  const toasterTopStart = createToaster({ placement: 'top-start' })
  const toasterBottomEnd = createToaster({ placement: 'bottom-end' })
</script>

{#snippet topTitle()}Top Start Toast{/snippet}
{#snippet topDescription()}This toast appears at top-start{/snippet}
{#snippet bottomTitle()}Bottom End Toast{/snippet}
{#snippet bottomDescription()}This toast appears at bottom-end{/snippet}

<button
  type="button"
  onclick={() => toasterTopStart.create({ title: topTitle, description: topDescription, type: 'info' })}
>
  Top Start
</button>
<button
  type="button"
  onclick={() => toasterBottomEnd.create({ title: bottomTitle, description: bottomDescription, type: 'info' })}
>
  Bottom End
</button>

<Toaster toaster={toasterTopStart}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

<Toaster toaster={toasterBottomEnd}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Toast Promise

Display a toast based on a promise result.

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const props = withDefaults(defineProps<{
  duration?: number
  promiseDelay?: number
}>(), {
  promiseDelay: 1000,
})

const toaster = createToaster({ placement: 'bottom-end' })

const createSuccessPromise = () => {
  toaster.promise(
    new Promise((resolve) => setTimeout(() => resolve('done'), props.promiseDelay)),
    {
      loading: { title: 'Loading...', description: 'Please wait' },
      success: { title: 'Success!', description: 'Operation completed' },
      error: { title: 'Failed!', description: 'Something went wrong' },
    },
    { duration: props.duration },
  )
}

const createErrorPromise = () => {
  toaster.promise(
    new Promise((_, reject) => setTimeout(() => reject(new Error('error')), props.promiseDelay)),
    {
      loading: { title: 'Loading...', description: 'Please wait' },
      success: { title: 'Success!', description: 'Operation completed' },
      error: { title: 'Failed!', description: 'Something went wrong' },
    },
    { duration: props.duration },
  )
}
</script>

<template>
  <button @click="createSuccessPromise">Promise Success</button>
  <button @click="createErrorPromise">Promise Error</button>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

interface ToastPromiseProps {
  duration?: number
  promiseDelay?: number
}

export function ToastPromise(props: ToastPromiseProps = {}) {
  const toaster = useMemo(() => createToaster({ placement: 'bottom-end' }), [])

  const createSuccessPromise = () => {
    toaster.promise(
      new Promise(resolve => setTimeout(() => resolve('done'), props.promiseDelay ?? 1000)),
      {
        loading: { title: 'Loading...', description: 'Please wait' },
        success: { title: 'Success!', description: 'Operation completed' },
        error: { title: 'Failed!', description: 'Something went wrong' },
      },
      { duration: props.duration },
    )
  }

  const createErrorPromise = () => {
    toaster.promise(
      new Promise((_, reject) => setTimeout(() => reject(new Error('error')), props.promiseDelay ?? 1000)),
      {
        loading: { title: 'Loading...', description: 'Please wait' },
        success: { title: 'Success!', description: 'Operation completed' },
        error: { title: 'Failed!', description: 'Something went wrong' },
      },
      { duration: props.duration },
    )
  }

  return (
    <>
      <button type="button" onClick={createSuccessPromise}>Promise Success</button>
      <button type="button" onClick={createErrorPromise}>Promise Error</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'

const promiseOptions = {
  loading: { title: 'Loading...', description: 'Please wait' },
  success: { title: 'Success!', description: 'Operation completed' },
  error: { title: 'Failed!', description: 'Something went wrong' },
}

export function ToastPromise() {
  const toaster = createToaster({ placement: 'bottom-end' })

  const createSuccessPromise = () => {
    const promise = new Promise<string>((resolve) => {
      setTimeout(() => resolve('done'), 1000)
    })
    toaster.promise(promise, promiseOptions)
  }

  const createErrorPromise = () => {
    const promise = new Promise<string>((_resolve, reject) => {
      setTimeout(() => reject(new Error('error')), 1000)
    })
    toaster.promise(promise, promiseOptions)
  }

  return (
    <>
      <button type="button" onClick={createSuccessPromise}>Promise Success</button>
      <button type="button" onClick={createErrorPromise}>Promise Error</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

<script module lang="ts">
  export interface ToastPromiseProps {
    duration?: number
    promiseDelay?: number
  }
</script>

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  let { duration, promiseDelay = 1000 }: ToastPromiseProps = $props()

  const toaster = createToaster({ placement: 'bottom-end' })

  const options = {
    loading: { title: loadingTitle, description: loadingDescription },
    success: { title: successTitle, description: successDescription },
    error: { title: errorTitle, description: errorDescription },
  }
</script>

{#snippet loadingTitle()}Loading...{/snippet}
{#snippet loadingDescription()}Please wait{/snippet}
{#snippet successTitle()}Success!{/snippet}
{#snippet successDescription()}Operation completed{/snippet}
{#snippet errorTitle()}Failed!{/snippet}
{#snippet errorDescription()}Something went wrong{/snippet}

<button
  type="button"
  onclick={() => toaster.promise(
    new Promise((resolve) => setTimeout(() => resolve('done'), promiseDelay)),
    options,
    { duration },
  )}
>
  Promise Success
</button>
<button
  type="button"
  onclick={() => toaster.promise(
    new Promise((_, reject) => setTimeout(() => reject(new Error('error')), promiseDelay)),
    options,
    { duration },
  )}
>
  Promise Error
</button>

<Toaster {toaster}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Toast Update

Update an existing toast notification.

<script setup lang="ts">
import { ref } from 'vue'
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const props = defineProps<{
  duration?: number
}>()

const toaster = createToaster({ placement: 'bottom-end' })
const toastId = ref<string | undefined>()

const createToast = () => {
  toastId.value = toaster.create({
    title: 'Original Title',
    description: 'Original Description',
    type: 'info',
    duration: props.duration,
  })
}

const updateToast = () => {
  if (toastId.value) {
    toaster.update(toastId.value, {
      title: 'Updated Title',
      description: 'Updated Description',
      type: 'success',
      duration: props.duration,
    })
  }
}
</script>

<template>
  <button @click="createToast">Create Toast</button>
  <button @click="updateToast">Update Toast</button>
  <Toaster :toaster="toaster" v-slot="toast">
    <Toast.Root>
      <Toast.Title>{{ toast.title }}</Toast.Title>
      <Toast.Description>{{ toast.description }}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  </Toaster>
</template>

import { useMemo, useRef } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

interface ToastUpdateProps {
  duration?: number
}

export function ToastUpdate(props: ToastUpdateProps = {}) {
  const toaster = useMemo(() => createToaster({ placement: 'bottom-end' }), [])
  const toastIdRef = useRef<string | undefined>(undefined)

  const createToast = () => {
    toastIdRef.current = toaster.create({
      title: 'Original Title',
      description: 'Original Description',
      type: 'info',
      duration: props.duration,
    })
  }

  const updateToast = () => {
    if (toastIdRef.current) {
      toaster.update(toastIdRef.current, {
        title: 'Updated Title',
        description: 'Updated Description',
        type: 'success',
        duration: props.duration,
      })
    }
  }

  return (
    <>
      <button type="button" onClick={createToast}>Create Toast</button>
      <button type="button" onClick={updateToast}>Update Toast</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'
import { createSignal } from 'solid-js'

export function ToastUpdate() {
  const toaster = createToaster({ placement: 'bottom-end' })
  const [toastId, setToastId] = createSignal<string | undefined>(undefined)

  const createToast = () => {
    setToastId(toaster.create({
      title: 'Original Title',
      description: 'Original Description',
      type: 'info',
    }))
  }

  const updateToast = () => {
    const id = toastId()
    if (!id)
      return

    toaster.update(id, {
      title: 'Updated Title',
      description: 'Updated Description',
      type: 'success',
    })
  }

  return (
    <>
      <button type="button" onClick={createToast}>Create Toast</button>
      <button type="button" onClick={updateToast}>Update Toast</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            <Toast.CloseTrigger>x</Toast.CloseTrigger>
          </Toast.Root>
        )}
      </Toaster>
    </>
  )
}

<script module lang="ts">
  export interface ToastUpdateProps {
    duration?: number
  }
</script>

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  let { duration }: ToastUpdateProps = $props()

  const toaster = createToaster({ placement: 'bottom-end' })
  let toastId: string | undefined

  function createToast() {
    toastId = toaster.create({ title: originalTitle, description: originalDescription, type: 'info', duration })
  }

  function updateToast() {
    if (toastId)
      toaster.update(toastId, { title: updatedTitle, description: updatedDescription, type: 'success', duration })
  }
</script>

{#snippet originalTitle()}Original Title{/snippet}
{#snippet originalDescription()}Original Description{/snippet}
{#snippet updatedTitle()}Updated Title{/snippet}
{#snippet updatedDescription()}Updated Description{/snippet}

<button type="button" onclick={createToast}>Create Toast</button>
<button type="button" onclick={updateToast}>Update Toast</button>

<Toaster {toaster}>
  {#snippet children(toast)}
    <Toast.Root>
      <Toast.Title>{@render toast().title?.()}</Toast.Title>
      <Toast.Description>{@render toast().description?.()}</Toast.Description>
      <Toast.CloseTrigger>x</Toast.CloseTrigger>
    </Toast.Root>
  {/snippet}
</Toaster>

Action

Handle action trigger events.

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'

const toaster = createToaster({
  placement: 'bottom-end',
  gap: 24,
})

const addToast = () => {
  toaster.create({
    title: 'Toast Title',
    description: 'Toast Description',
    type: 'info',
    action: {
      label: 'Subscribe',
      onClick: () => {
        console.log('Subscribe')
      },
    },
  })
}
</script>

<template>
  <div>
    <button type="button" @click="addToast">Add Toast</button>
    <Toaster :toaster="toaster" v-slot="toast">
      <Toast.Root :key="toast.id">
        <Toast.Title>{{ toast.title }}</Toast.Title>
        <Toast.Description>{{ toast.description }}</Toast.Description>
        <Toast.ActionTrigger v-if="toast.action">{{ toast.action?.label }}</Toast.ActionTrigger>
      </Toast.Root>
    </Toaster>
  </div>
</template>

import { useMemo } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

export function Action() {
  const toaster = useMemo(() => createToaster({
    placement: 'bottom-end',
    gap: 24,
  }), [])

  const addToast = () => {
    toaster.create({
      title: 'Toast Title',
      description: 'Toast Description',
      type: 'info',
      action: {
        label: 'Subscribe',
        onClick: () => {
          // eslint-disable-next-line no-console
          console.log('Subscribe')
        },
      },
    })
  }

  return (
    <div>
      <button type="button" onClick={addToast}>Add Toast</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root key={toast.id}>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
            {toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'

export function Action() {
  const toaster = createToaster({
    placement: 'bottom-end',
    gap: 24,
  })

  return (
    <div>
      <button
        type="button"
        onClick={() =>
          toaster.create({
            title: 'Toast Title',
            description: 'Toast Description',
            type: 'info',
            action: {
              label: 'Subscribe',
              onClick: () => {
                console.warn('Subscribe')
              },
            },
          })}
      >
        Add Toast
      </button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
            {toast().action && <Toast.ActionTrigger>{toast().action?.label}</Toast.ActionTrigger>}
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  const toaster = createToaster({ placement: 'bottom-end', gap: 24 })

  function addToast() {
    toaster.create({
      title,
      description,
      type: 'info',
      action: { label: 'Subscribe', onClick: () => console.log('Subscribe') },
    })
  }
</script>

{#snippet title()}Toast Title{/snippet}
{#snippet description()}Toast Description{/snippet}

<div>
  <button type="button" onclick={addToast}>Add Toast</button>

  <Toaster {toaster}>
    {#snippet children(toast)}
      <Toast.Root>
        <Toast.Title>{@render toast().title?.()}</Toast.Title>
        <Toast.Description>{@render toast().description?.()}</Toast.Description>
        {#if toast().action}
          <Toast.ActionTrigger>{toast().action?.label}</Toast.ActionTrigger>
        {/if}
      </Toast.Root>
    {/snippet}
  </Toaster>
</div>

Update

Update toast content dynamically.

<script setup lang="ts">
import { Toast, Toaster, createToaster } from '@destyler-ui/vue'
import { ref } from 'vue'

const toaster = createToaster({
  placement: 'bottom-end',
  overlap: true,
  gap: 24,
})

const id = ref<string | undefined>(undefined)

const createToast = () => {
  id.value = toaster.create({
    title: 'Loading',
    description: 'Loading ...',
    type: 'info',
  })
}

const updateToast = () => {
  if (!id.value) {
    return
  }
  toaster.update(id.value, {
    title: 'Success',
    description: 'Success!',
  })
}
</script>

<template>
  <div>
    <button type="button" @click="createToast">Create Toast</button>
    <button type="button" @click="updateToast">Update Toast</button>
    <Toaster :toaster="toaster" v-slot="toast">
      <Toast.Root>
        <Toast.Title>{{ toast.title }}</Toast.Title>
        <Toast.Description>{{ toast.description }}</Toast.Description>
      </Toast.Root>
    </Toaster>
  </div>
</template>

import { useMemo, useRef } from 'react'
import { createToaster, Toast, Toaster } from '@destyler-ui/react'

export function Update() {
  const toaster = useMemo(() => createToaster({
    placement: 'bottom-end',
    overlap: true,
    gap: 24,
  }), [])

  const idRef = useRef<string | undefined>(undefined)

  const createToast = () => {
    idRef.current = toaster.create({
      title: 'Loading',
      description: 'Loading ...',
      type: 'info',
    })
  }

  const updateToast = () => {
    if (!idRef.current) {
      return
    }
    toaster.update(idRef.current, {
      title: 'Success',
      description: 'Success!',
    })
  }

  return (
    <div>
      <button type="button" onClick={createToast}>Create Toast</button>
      <button type="button" onClick={updateToast}>Update Toast</button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast.title}</Toast.Title>
            <Toast.Description>{toast.description}</Toast.Description>
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

import { createToaster, Toast, Toaster } from '@destyler-ui/solid/toast'
import { createSignal } from 'solid-js'

export function Update() {
  const toaster = createToaster({
    placement: 'bottom-end',
    overlap: true,
    gap: 24,
  })
  const [id, setId] = createSignal<string | undefined>(undefined)

  const createToast = () => {
    const newId = toaster.create({
      title: 'Loading',
      description: 'Loading ...',
      type: 'info',
    })
    setId(newId)
  }

  const updateToast = () => {
    const currentId = id()
    if (!currentId) {
      return
    }
    toaster.update(currentId, {
      title: 'Success',
      description: 'Success!',
    })
  }

  return (
    <div>
      <button type="button" onClick={createToast}>
        Create Toast
      </button>
      <button type="button" onClick={updateToast}>
        Update Toast
      </button>
      <Toaster toaster={toaster}>
        {toast => (
          <Toast.Root>
            <Toast.Title>{toast().title}</Toast.Title>
            <Toast.Description>{toast().description}</Toast.Description>
          </Toast.Root>
        )}
      </Toaster>
    </div>
  )
}

<script lang="ts">
  import { Toast, Toaster, createToaster } from '@destyler-ui/svelte'

  const toaster = createToaster({ placement: 'bottom-end', overlap: true, gap: 24 })
  let toastId: string | undefined

  function createToast() {
    toastId = toaster.create({ title: loadingTitle, description: loadingDescription, type: 'info' })
  }

  function updateToast() {
    if (toastId)
      toaster.update(toastId, { title: successTitle, description: successDescription })
  }
</script>

{#snippet loadingTitle()}Loading{/snippet}
{#snippet loadingDescription()}Loading ...{/snippet}
{#snippet successTitle()}Success{/snippet}
{#snippet successDescription()}Success!{/snippet}

<div>
  <button type="button" onclick={createToast}>Create Toast</button>
  <button type="button" onclick={updateToast}>Update Toast</button>

  <Toaster {toaster}>
    {#snippet children(toast)}
      <Toast.Root>
        <Toast.Title>{@render toast().title?.()}</Toast.Title>
        <Toast.Description>{@render toast().description?.()}</Toast.Description>
      </Toast.Root>
    {/snippet}
  </Toaster>
</div>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ActionTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Description

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Title

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Toaster

Prop	Default	Type
`toaster*`	—	`CreateToasterReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ActionTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseToastContext) => ReactNode`

Description

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Title

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Toaster

Prop	Default	Type
`children*`	—	`(toast: Options<ReactNode>) => ReactNode`
`toaster*`	—	`CreateToasterReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js112.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ActionTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js112.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

CloseTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js112.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseToastContext) => Element`

Description

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js112.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Title

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js112.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Toaster

Prop	Default	Type
`children*`	—	`(toast: Accessor<Options<Element>>) => Element`
`toaster*`	—	`CreateToasterReturn`
`asChild`	—	`(props: (userProps?: solid_js112.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ActionTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

CloseTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseToastContext]>`

Description

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Title

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Toaster

Prop	Default	Type
`children*`	—	`Snippet<[Accessor<Options<Snippet<[]>>>]>`
`toaster*`	—	`CreateToasterReturn`
`asChild`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`