<div class="flex flex-wrap gap-2">
  <button class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 cursor-pointer" onclick="this.parentElement.querySelector('[aria-live]').dispatchEvent(new CustomEvent('phx-shadcn:toast', {detail: {type: 'success', title: 'Event created', description: 'Sunday, December 03, 2023 at 9:00 AM'}}))">Success</button>
  <button class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 cursor-pointer" onclick="this.parentElement.querySelector('[aria-live]').dispatchEvent(new CustomEvent('phx-shadcn:toast', {detail: {type: 'error', title: 'Something went wrong', description: 'Please try again later.'}}))">Error</button>
  <button class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 cursor-pointer" onclick="this.parentElement.querySelector('[aria-live]').dispatchEvent(new CustomEvent('phx-shadcn:toast', {detail: {type: 'info', title: 'New update available'}}))">Info</button>
  <button class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 cursor-pointer" onclick="this.parentElement.querySelector('[aria-live]').dispatchEvent(new CustomEvent('phx-shadcn:toast', {detail: {type: 'warning', title: 'Disk space low', description: 'Less than 10% remaining.'}}))">Warning</button>
  <.toaster id="toast-single-default" flash={%{}}/>
</div>

<div class="flex gap-2">
  <button class="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 cursor-pointer" onclick="this.parentElement.querySelector('[aria-live]').dispatchEvent(new CustomEvent('phx-shadcn:toast', {detail: {type: 'info', title: 'Info toast', description: 'Displayed at the top center.'}}))">Show Top Toast</button>
  <.toaster id="toast-single-top-center" position="top-center" flash={%{}}/>
</div>