Toast / Toaster

<!-- 1. Include the toaster element in your page (optional: auto-injected if omitted) -->
<ui-toaster position="bottom-right"></ui-toaster>

<!-- 2. Trigger toasts from any framework or script -->
<script type="module">
  import { toast } from 'nnui-kit';

  // Default Toast
  toast('Your event has been scheduled.');

  // Success Toast with description
  toast.success('Changes saved', {
    description: 'All workspace preferences updated.',
  });

  // Error Toast
  toast.error('Could not complete request', {
    description: 'Please check your connection and retry.',
  });

  // Toast with interactive Action button
  toast('File archived', {
    description: 'Moved to trash folder.',
    action: {
      label: 'Undo',
      onClick: () => toast.success('Action undone!'),
    },
  });
</script>

import React from 'react';
import { toast } from 'nnui-kit';

export default function ToasttoasterDemo() {
  const triggerToast = () => {
    toast.success('Action completed successfully!', {
      description: 'Your changes have been saved to the cloud.',
      action: {
        label: 'Undo',
        onClick: () => console.log('Undo triggered'),
      },
    });
  };

  return (
    <div className="flex flex-col gap-4">
      {/* Mount toaster container once in your app layout */}
      <ui-toaster position="bottom-right" />

      <button data-ui="button" onClick={triggerToast}>
        Show Toast Notification
      </button>
    </div>
  );
}

<script setup>
import { toast } from 'nnui-kit';

function showToast() {
  toast.success('Action completed successfully!', {
    description: 'Your changes have been saved to the cloud.',
    action: {
      label: 'Undo',
      onClick: () => console.log('Undo triggered'),
    },
  });
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <!-- Place toaster in root App.vue or layout -->
    <ui-toaster position="bottom-right" />

    <button data-ui="button" @click="showToast">
      Show Toast Notification
    </button>
  </div>
</template>

<script>
  import { toast } from 'nnui-kit';

  function showToast() {
    toast.success('Action completed successfully!', {
      description: 'Your changes have been saved to the cloud.',
      action: {
        label: 'Undo',
        onClick: () => console.log('Undo triggered'),
      },
    });
  }
</script>

<ui-toaster position="bottom-right"></ui-toaster>

<button data-ui="button" onclick={showToast}>
  Show Toast Notification
</button>