Notifications

3 new
MS

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

EW

Emma Wilson commented on Homepage Redesign

45 minutes ago

JM

James Miller mentioned you in Sprint Planning

2 hours ago

SC

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

DK

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Toast

Toast notification examples.

Toast Positions

<button @click="$dispatch('show-toast', { position: &apos;top-right&apos;, message: &apos;Successfully saved!&apos;, type: &apos;success&apos; })" class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Top Right</button>

<!-- Toast rendering is handled by the Alpine x-data on #toastContainer -->

Toast Variants

<button @click="$dispatch('show-toast', { position: &apos;top-right&apos;, message: &apos;Operation completed successfully!&apos;, type: &apos;success&apos; })" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Success Toast</button>
<button @click="$dispatch('show-toast', { position: &apos;top-right&apos;, message: &apos;Something went wrong!&apos;, type: &apos;error&apos; })" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Error Toast</button>

<!-- Toast rendering is handled by the Alpine x-data on #toastContainer -->

Simple Toast Trigger

<button @click="$dispatch('show-toast', { position: &apos;top-right&apos;, message: &apos;Your changes have been saved!&apos;, type: &apos;success&apos; })" class="bg-green-500 hover:bg-green-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition-colors">Show Success Toast</button>

<!-- Toast rendering is handled by the Alpine x-data on #toastContainer -->