Toasty
Implemented FeedbackExpandable notification stack with variants, paused expiry and a live region.
Kumo reference: kumo-ui.com/components/toast/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Default
Show template
{% load wdj %}
<button type="button" data-wdj-toast-btn data-variant="default" data-title="Example notification" data-description="Your changes have been processed." class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show default toast</button>Success
Show template
{% load wdj %}
<button type="button" data-wdj-toast-btn data-variant="success" data-title="Example notification" data-description="Your changes have been processed." class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show success toast</button>Warning
Show template
{% load wdj %}
<button type="button" data-wdj-toast-btn data-variant="warning" data-title="Example notification" data-description="Your changes have been processed." class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show warning toast</button>Error
Show template
{% load wdj %}
<button type="button" data-wdj-toast-btn data-variant="error" data-title="Example notification" data-description="Your changes have been processed." class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show error toast</button>Information
Show template
{% load wdj %}
<button type="button" data-wdj-toast-btn data-variant="info" data-title="Example notification" data-description="Your changes have been processed." class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show information toast</button>Persistent
Show template
{% load wdj %}
<button type="button" x-data @click="wdj.toast({ title: 'Persistent notification', duration: 0 })" class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show persistent toast</button>Description only
Show template
{% load wdj %}
<button type="button" x-data @click="wdj.toast({ description: 'Your changes are saved.' })" class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Description only</button>With action
Show template
{% load wdj %}
<button type="button" x-data @click="wdj.toast({ title: 'Review changes', action: { label: 'Documentation', href: '/install/' } })" class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">With action</button>Multiple toasts
Hover, focus or tap the stack to expand notifications.
Show template
{% load wdj %}
<div class="grid justify-items-center gap-3">
<p class="text-base text-kumo-subtle">Hover, focus or tap the stack to expand notifications.</p>
<button type="button" x-data @click="wdj.toast({ title: 'First toast', description: 'This is the first notification.' }); setTimeout(() => wdj.toast({ title: 'Second toast', description: 'This is the second notification.' }), 500); setTimeout(() => wdj.toast({ title: 'Third toast', description: 'This is the third notification.' }), 1000)" class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show multiple toasts</button>
</div>Update
Show template
{% load wdj %}
<button type="button" x-data @click="const toast = wdj.toast({ title: 'Saving', duration: 0 }); setTimeout(() => wdj.updateToast(toast, { title: 'Saved', variant: 'success' }), 400)" class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Update</button>Promise
Show template
{% load wdj %}
<button type="button" x-data @click="wdj.toastPromise(new Promise(resolve => setTimeout(resolve, 400)), { loading: 'Saving', success: 'Saved' })" class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Promise</button>Non dismissible
Show template
{% load wdj %}
<button type="button" x-data @click="wdj.toast({ title: 'Auto-dismiss notification', dismissible: false, duration: 1500 })" class="h-9 rounded-lg px-3 text-base ring-1 ring-kumo-line hover:bg-kumo-tint">Show without close button</button>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | unset | Title; pass the documented value shown in the examples. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| variant | string | component-specific | Variant; pass the documented value shown in the examples. |
| icon | string | unset | Icon; pass the documented value shown in the examples. |
| dismissible | bool | True | Dismissible; pass the documented value shown in the examples. |
| action | string / HTML slot | unset | Action; pass the documented value shown in the examples. |
| class | string | "" | Class; pass the documented value shown in the examples. |