SajiloAlert

Section 1

आधारभूत अलर्टहरू (Basic Alerts)

Standard modal dialogs with icon, title, message, animations, and accessible keyboard escape handling.

import { alert } from "sajilo-alert";

Section 2

पुष्टि संवाद (Confirmation Dialog)

Promise<boolean>

Returns a Promise that resolves true on confirm and false on cancel, backdrop click, or Escape. Never leaves unresolved promises.

const result = await alert.confirm({
  title: "खाता हटाउने?",
  message: "यो कार्य फिर्ता गर्न सकिँदैन।",
  confirmText: "हटाउनुहोस्",
  cancelText: "रद्द गर्नुहोस्"
});

Section 3

प्रमिस ह्यान्डलिङ (Promise Handling)

alert.promise(...)

Seamlessly connects an async Promise with loading spinner, success update on resolve, and error update on rejection.

await alert.promise(saveData(), {
  loading: "प्रक्रिया भइरहेको छ...",
  success: (data) => "काम सफल भयो!",
  error: (err) => "काम असफल भयो!"
});

Section 4

टोस्ट सूचनाहरू (Toast Notifications)

alert.toast.*

Non-blocking, keyboard accessible, self-stacking toasts with auto-dismiss timers and configurable max limits.

Positions: top-right, top-left, bottom-right, bottom-left, top, bottom

Section 5

अनडु समर्थन (Interactive Undo)

alert.undo(...)

Click delete on any document below. An undo toast will appear with a strict single-execution guarantee!

वार्षिक बजेट रिपोर्ट (Annual Budget)

Finance • Just now

कर्मचारी विवरण तालिका (Staff Directory)

HR • 2 hours ago

परियोजना प्रस्तावना (Project Proposal)

Engineering • Yesterday

Auto-expires in 5000ms

Interactive

लाइभ कोड जेनेरेटर (Live Option Builder)

Customize options in real-time, test the result immediately, and copy production-ready TypeScript code.

Alert Type

Title

Message

Position

Duration (ms)

Render as Toast NotificationShow Close Button

TypeScript / JS Snippet

import { alert } from "sajilo-alert";

alert.success({
  title: "सफल भयो!",
  message: "तपाईंको कार्य सफलतापूर्वक सम्पन्न भयो।",
  position: "center",
  duration: 4000,
  theme: "nepal"
});

Theme: nepalLanguage: नेपाली (ne)

Universal

सबै फ्रेमवर्कमा प्रयोग (Framework Support)

Zero dependencies. Works seamlessly with Vanilla JS, TypeScript, React, Next.js, Vue 3, Svelte, and Vite.

import React from 'react';
import { alert } from 'sajilo-alert';

export function DeleteButton({ userId }) {
  const handleDelete = async () => {
    const confirmed = await alert.confirm({
      title: 'के तपाईं निश्चित हुनुहुन्छ?',
      message: 'यो प्रयोगकर्ता हटाइनेछ।',
      confirmText: 'हटाउनुहोस्',
      cancelText: 'रद्द गर्नुहोस्'
    });

    if (confirmed) {
      await deleteUser(userId);
      alert.toast.success('प्रयोगकर्ता सफलतापूर्वक हटाइयो।');
    }
  };

  return <button onClick={handleDelete}>Delete Account</button>;
}

Customization

अनुकूलन र ब्रान्डिङ (CSS Variables & Overrides)

तपाईंको ब्रान्ड रङ, बर्डर रेडियस, फन्ट, र छायाँहरू मिलाउन सजिलै CSS Variables ओभरराइड गर्नुहोस्।

Add these custom properties to your global CSS file (such as globals.css or styles.css) inside :root to apply your brand palette universally across all alerts and toasts.

/* globals.css - Override SajiloAlert CSS variables */
:root {
  /* Brand primary action & button colors */
  --sa-primary: #DC143C;            /* Nepali Crimson */
  --sa-primary-hover: #b81032;
  --sa-primary-text: #ffffff;

  /* Secondary action / cancel button */
  --sa-secondary: #003893;          /* Himalayan Navy */
  --sa-secondary-hover: #002b70;
  --sa-secondary-text: #ffffff;

  /* Status semantic colors */
  --sa-success: #16a34a;
  --sa-danger: #dc2626;
  --sa-warning: #d97706;
  --sa-info: #2563eb;

  /* Surfaces, text & borders */
  --sa-background: #ffffff;
  --sa-surface: #f8fafc;
  --sa-text: #0f172a;
  --sa-text-muted: #64748b;
  --sa-border: #e2e8f0;

  /* Geometry & Typography */
  --sa-radius: 12px;                /* Modal & toast corners */
  --sa-radius-sm: 8px;              /* Button corner radius */
  --sa-font-family: 'Noto Sans Devanagari', 'Mukta', system-ui, sans-serif;
  --sa-backdrop: rgba(15, 23, 42, 0.45);
}

Documentation

पूर्ण एपीआई विवरण (API Reference)

Deterministic, strictly typed methods and configuration options.

Method / Property	Arguments	Returns	Description
alert.success()	message: string \| AlertOptions	string (id)	Opens a success modal dialog
alert.error()	message: string \| AlertOptions	string (id)	Opens an error alert modal
alert.warning()	message: string \| AlertOptions	string (id)	Opens a warning alert modal
alert.info()	message: string \| AlertOptions	string (id)	Opens an information alert modal
alert.loading()	message?: string \| AlertOptions	string (id)	Opens infinite loading spinner modal
alert.confirm()	options: ConfirmOptions	Promise<boolean>	Displays confirm & cancel dialog
alert.promise()	promise, options: PromiseOptions	Promise<T>	Handles async loading, success, and error
alert.undo()	options: UndoOptions	string (id)	Undo toast with guaranteed single run
alert.toast.*	success \| error \| warning \| info \| loading	string (id)	Non-blocking stacked toast notifications
alert.setLanguage()	lang: 'ne' \| 'en'	void	Switches default system label language
alert.configure()	config: Partial<GlobalConfig>	void	Configures theme, position, duration, etc.