or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

dialog-management.mddom-access.mdindex.mdinput-validation.mdstate-management.mdtimer-control.md
tile.json

tessl/npm-sweetalert2

A beautiful, responsive, customizable and accessible replacement for JavaScript's popup boxes

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/sweetalert2@11.23.x

To install, run

npx @tessl/cli install tessl/npm-sweetalert2@11.23.0

index.mddocs/

SweetAlert2

SweetAlert2 is a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. It provides zero-dependency alert, confirm, prompt, and toast notifications with extensive customization options and comprehensive API controls.

Package Information

  • Package Name: sweetalert2
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install sweetalert2
  • CDN: Available via unpkg, jsDelivr, and other CDNs

Core Imports

import Swal from 'sweetalert2';

For CommonJS:

const Swal = require('sweetalert2');

Alternative named import (ES modules):

import { default as Swal } from 'sweetalert2';

Basic Usage

import Swal from 'sweetalert2';

// Simple alert
await Swal.fire('Hello world!');

// Alert with icon and text
await Swal.fire('Success!', 'Your changes have been saved.', 'success');

// Confirmation dialog
const result = await Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!'
});

if (result.isConfirmed) {
  Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
}

// Toast notification
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true
});

Toast.fire({
  icon: 'success',
  title: 'Signed in successfully'
});

// Theme usage
await Swal.fire({
  title: 'Dark Theme Example',
  text: 'This popup uses the dark theme',
  icon: 'info',
  theme: 'dark'
});

// Declarative popup using bindClickHandler
Swal.bindClickHandler(); // Enables data-swal-template attribute

Architecture

SweetAlert2 is built around several key components:

  • Main API: The Swal namespace containing all static methods for creating and controlling popups
  • Options System: Comprehensive configuration through the SweetAlertOptions interface
  • Promise-based: All popup operations return promises with structured results
  • DOM Management: Complete control over popup elements and styling
  • Event System: Lifecycle hooks and event handlers for custom interactions
  • Timer System: Built-in auto-close functionality with progress indicators

Capabilities

Core Dialog Methods

Primary methods for creating and displaying popups with various configurations and interaction patterns.

function fire<T = any>(options: SweetAlertOptions): Promise<SweetAlertResult<Awaited<T>>>;
function fire<T = any>(title?: string, html?: string, icon?: SweetAlertIcon): Promise<SweetAlertResult<Awaited<T>>>;
function mixin(options: SweetAlertOptions): typeof Swal;

Dialog Creation and Management

DOM Element Access

Methods for accessing and manipulating specific popup elements for advanced customization and control.

function getContainer(): HTMLElement | null;
function getPopup(): HTMLElement | null;
function getTitle(): HTMLElement | null;
function getConfirmButton(): HTMLButtonElement | null;
function getDenyButton(): HTMLButtonElement | null;
function getCancelButton(): HTMLButtonElement | null;

DOM Element Access

State Management

Methods for checking popup state, controlling visibility, and managing loading states.

function isVisible(): boolean;
function isLoading(): boolean;
function close(result?: Partial<SweetAlertResult>): void;
function update(options: Pick<SweetAlertOptions, SweetAlertUpdatableParameters>): void;

State Management

Input Handling

Comprehensive input support including validation, various input types, and input state management.

function getInput(): HTMLInputElement | null;
function disableInput(): void;
function enableInput(): void;
function showValidationMessage(validationMessage: string): void;
function resetValidationMessage(): void;

Input Handling and Validation

Timer Control

Auto-close functionality with timer controls and progress indication capabilities.

function getTimerLeft(): number | undefined;
function stopTimer(): number | undefined;
function resumeTimer(): number | undefined;
function toggleTimer(): number | undefined;
function isTimerRunning(): boolean | undefined;
function increaseTimer(ms: number): number | undefined;

Timer Control

Utility Functions

Advanced utility functions for parameter validation and declarative popup triggering.

function bindClickHandler(attribute?: string): void;
function isValidParameter(paramName: string): paramName is keyof SweetAlertOptions;
function isUpdatableParameter(paramName: string): paramName is SweetAlertUpdatableParameters;
function argsToParams(params: SweetAlertArrayOptions | readonly [SweetAlertOptions]): SweetAlertOptions;

Usage Examples:

// Enable declarative popups with custom attribute
Swal.bindClickHandler('data-my-alert');

// Validate parameter names programmatically  
if (Swal.isValidParameter('title')) {
  console.log('title is a valid parameter');
}

// Check if parameter can be updated
if (Swal.isUpdatableParameter('theme')) {
  Swal.update({ theme: 'dark' });
}

// Convert array parameters to options object
const options = Swal.argsToParams(['Hello', 'World', 'success']);

Core Types

interface SweetAlertResult<T = any> {
  readonly isConfirmed: boolean;
  readonly isDenied: boolean;
  readonly isDismissed: boolean;
  readonly value?: T;
  readonly dismiss?: Swal.DismissReason;
}

enum DismissReason {
  cancel = 'cancel',
  backdrop = 'backdrop',
  close = 'close',
  esc = 'esc',
  timer = 'timer'
}

type SweetAlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question';

type SweetAlertPosition = 
  | 'top' | 'top-start' | 'top-end' | 'top-left' | 'top-right'
  | 'center' | 'center-start' | 'center-end' | 'center-left' | 'center-right'
  | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-left' | 'bottom-right';

type SweetAlertInput = 
  | 'text' | 'email' | 'password' | 'number' | 'tel' | 'search' | 'range'
  | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url'
  | 'date' | 'datetime-local' | 'time' | 'week' | 'month';

type SweetAlertTheme = 
  | 'light' | 'dark' | 'auto' | 'minimal' | 'borderless' | 'embed-iframe' 
  | 'bulma' | 'bulma-light' | 'bulma-dark';

type SweetAlertEventName = 
  | 'didRender' | 'willOpen' | 'didOpen' | 'willClose' | 'didClose' | 'didDestroy';

type SweetAlertArrayOptions = readonly [string?, string?, SweetAlertIcon?];

type SweetAlertGrow = 'row' | 'column' | 'fullscreen' | false;

Global Constants

const version: string; // SweetAlert2 version string