Toast

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Toast
  title="Saved"
  description="description"
  variant="success"
  duration="5000"
/>

Legacy mount name: data-component="Toast".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/Toast.wrn

component Toast {
  props {
    class = ""
    title = "Saved"
    description = ""
    variant = "success"
    duration = 5000
  }
  state visible = true
  view {
        <div data-show="visible" role="status" aria-live="polite" class="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-2xl border bg-white p-4 shadow-2xl dark:border-slate-800 dark:bg-slate-900 {class}">
        <span class="mt-0.5 flex size-8 items-center justify-center rounded-full {variant === 'success' ? 'bg-emerald-100 text-emerald-700' : variant === 'danger' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">{variant === 'success' ? '✓' : variant === 'danger' ? '!' : 'i'}</span>
        <div class="min-w-0 flex-1">
        <p class="font-semibold">{title}</p>
        <p data-show="description" class="mt-1 text-sm text-slate-500">{description}</p>
        </div>
        <button type="button" aria-label="Close" @click="visible = false" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100">×</button>
        </div>
    }
}