Toast

Non-blocking floating notification toasts with distinct semantic color badges, glowing accent borders, auto-dismiss timers, action buttons, and soundless micro-animations.

<x-toast>

Semantic Accent Stripe Toasts

Each semantic variant has an independent color badge, high-contrast left border, distinctive icon, clear white title, and custom glow.

Changes Saved Your project settings have been synchronized.

Payment Failed Card authentication failed. Please update payment method.

Storage Limit Warning You have reached 88% of your monthly database capacity.

Framework Update Veldora UI v0.5.2 is available with enhanced animations.

New Feature Unlocked You now have access to all 28 pure-CSS UI components.

{{-- Standard Template Usage --}}
<x-toast type="success" title="Changes Saved" message="Your project settings have been synchronized." />
<x-toast type="danger"  title="Payment Failed" message="Card authentication failed. Please retry." />
<x-toast type="warning" title="Storage Limit"  message="You have reached 88% capacity." />
<x-toast type="info"    title="Update Ready"   message="Veldora UI v0.5.2 is available." />
<x-toast type="purple"  title="Pro Features"   message="Unlocked 28 pure-CSS components." />

Toasts with Interactive Action Buttons

Attach contextual inline action triggers like Undo, Retry, or Upgrade directly into the notification.

Project Deleted The repository "my-app" has been moved to trash.

API Rate Limit 95% of your 10,000 monthly API calls consumed.

<x-toast type="danger" title="Project Deleted" message="Moved to trash.">
    <x-slot name="action">
        <x-button size="sm" variant="outline-danger" onclick="undoDelete()">Undo</x-button>
    </x-slot>
</x-toast>

Solid Vibrant Gradient Toasts

Full-gradient high-impact cards designed for critical system alerts and milestone achievements.

✓

Build Succeeded Production bundle compiled in 1.4s with 0 errors.

Critical Exception Database replication connection dropped on port 3306.

⚠

High Memory Pressure Worker process 4 is using 94% allocated heap.

<x-toast variant="solid-success" title="Build Succeeded" message="Compiled in 1.4s." />
<x-toast variant="solid-danger"  title="Critical Exception" message="Connection dropped." />
<x-toast variant="solid-warning" title="High Memory" message="Heap load at 94%." />

Live Interactive Toast Playground

Click below to fire real animated floating toasts into the viewport using JavaScript.

Test all 5 semantic toast variations live in your browser:

// Trigger toasts from any JavaScript script:
window.showToast("Settings synchronized successfully!", "success", "Success");
window.showToast("Payment transaction failed", "danger", "Error");
window.showToast("Storage approaching 90%", "warning", "Warning");
window.showToast("Veldora v0.5.2 released", "info", "Notice");
window.showToast("Pro features activated", "purple", "Veldora Pro");

← Previous Badge Next → Spinner