Theme:
Toast
Toasts display brief notification messages. They use alert components inside a fixed container and require Alpine.js for dynamic behavior.
Positions
Toasts can appear in six positions around the viewport. The examples below show static previews.
<!-- Position classes: -->
<div class="dui-toast dui-toast-top-right">...</div>
<div class="dui-toast dui-toast-top-left">...</div>
<div class="dui-toast dui-toast-top-center">...</div>
<div class="dui-toast dui-toast-bottom-right">...</div>
<div class="dui-toast dui-toast-bottom-left">...</div>
<div class="dui-toast dui-toast-bottom-center">...</div>
Alpine.js Integration
<div x-data="{ toasts: [] }" class="dui-toast dui-toast-bottom-right">
<template x-for="toast in toasts" :key="toast.id">
<div x-show="toast.visible" x-transition
:class="'dui-alert dui-alert-' + toast.type">
<span x-text="toast.message"></span>
</div>
</template>
</div>
<!-- Trigger a toast from anywhere: -->
<button @click="toasts.push({ id: Date.now(), type: 'success',
message: 'Saved!', visible: true })"
class="dui-btn dui-btn-primary">Show toast</button>