SweetAlert

https://github.com/t4t5/sweetalert
Admin
SweetAlert is a beautiful, customizable, and accessible replacement for JavaScript's default alert...
Tokens:50,967
Snippets:429
Trust Score:9.5
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Basic input content example

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Shows the predefined "input" content option that resolves the confirm button's value to the input's value. This is the baseline example that is later recreated with a custom DOM node.

```javascript
swal("Write something here:", {
  content: "input",
}).then((value) => {
  swal(`You typed: ${value}`);
});
```

--------------------------------

### Method examples: close, getState, setActionValue, stopLoading

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Examples of SweetAlert methods: close closes the modal, getState retrieves modal state, setActionValue changes button value, stopLoading removes loading states.

```javascript
swal.close()
```

```javascript
swal.getState()
```

```javascript
swal.setActionValue({ confirm: 'Text from input' })
```

```javascript
swal.stopLoading()
```

--------------------------------

### Input with attributes example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-content.md

Shows how to customize the input by providing an object with element and attributes, such as setting a placeholder and type.

```javascript
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});
```

--------------------------------

### Example usage with console output

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-deprecations.md

Shows how deprecated options trigger warnings. The 1.x keys are not applied; use the replacements instead.

```javascript
import swal from 'sweetalert';

swal({
  type: "warning",        // 1.x name
  allowEscapeKey: false,  // 1.x name
});
// Console output:
//   SweetAlert warning: "type" option has been deprecated. Please use "icon" instead. More details: https://sweetalert.js.org/docs/#icon
//   SweetAlert warning: "allowEscapeKey" option has been renamed. Please use "closeOnEsc" instead. More details: https://sweetalert.js.org/docs/#closeonesc
```

--------------------------------

### Using predefined input content

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/guides/index.md

Demonstrates the simplest use of content: "input" to get user input and display it in a follow-up alert.

```javascript
swal("Write something here:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});
```

--------------------------------

### Built-in input prompt example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-content.md

Shows how to use the built-in input prompt by passing the string 'input' as the content option, which expands to the default input options.

```javascript
import swal from 'sweetalert';

const value = await swal("Type something:", {
  content: "input", // expands to { element: "input", attributes: { placeholder: "" } }
});
swal(`You typed: ${value}`);
```

--------------------------------

### Use options object for alert

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Rewrite the previous example using an object as the only parameter. Allows specifying many more options.

```javascript
swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
});
```

--------------------------------

### Install sweetalert with npm

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Install the sweetalert package via npm. This command adds the package to your project's dependencies.

```bash
$ npm install --save sweetalert
```

--------------------------------

### Inspecting the live state

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/state.md

Shows how to use swal.getState() to inspect the current state. The example sets an action value and then checks the state's actions and isOpen properties.

```javascript
swal.setActionValue({ roll: { value: "rolled" } });

const state = swal.getState();
// state.actions.roll.value === "rolled"
// state.isOpen === true
```

--------------------------------

### setDefaults: merge user defaults and usage example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/configuration.md

Defines the setDefaults function that merges user defaults over built-in defaults, replacing the stored userDefaults on each call. The JavaScript example shows how to set application-wide defaults and then call swal with a simple string, which uses those defaults.

```typescript
export const setDefaults = (opts: object): void => {
  userDefaults = Object.assign({}, defaultOpts, opts);
};
```

```javascript
import swal from 'sweetalert';

swal.setDefaults({
  icon: "info",
  buttons: { cancel: true },
  closeOnEsc: false,
  timer: null, // explicitly re-set to disable a previously set default
});

swal("Heads up"); // info icon, cancel+confirm, Esc disabled
```

--------------------------------

### Raw DOM node example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-content.md

Shows how to pass a raw DOM element as the content option, which is converted to an object with the element property.

```javascript
const slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider, // Element -> { element: slider }
});
```

--------------------------------

### Reading modal state - JavaScript example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/actions.md

Shows how to use swal.getState() to read the current modal state, noting that state.promise and state.timer are removed from the returned object.

```javascript
swal("Hello");

const state = swal.getState();
// state.isOpen === true
// state.actions.confirm.value === true
// state.promise and state.timer are removed
```

--------------------------------

### Full programmatic flow example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/init.md

Shows how to call swal() with a configuration object to create a confirmation dialog with a text input, custom buttons, and danger mode. The promise resolves with the value 'deleted' or the typed input value.

```javascript
import swal from 'sweetalert';

swal({
  title: "Confirm deletion",
  text: "This file will be removed\npermanently",   // '\n' renders as <br>
  icon: "warning",                                   // predefined -> swal-icon--warning
  dangerMode: true,                                  // red confirm button
  content: {
    element: "input",
    attributes: { placeholder: "Type DELETE" },
  },
  buttons: {
    cancel: "Abort",
    confirm: { text: "Delete", value: "deleted", className: "danger-btn" },
  },
}).then(value => {
  // value === "deleted" (or the typed input value once typing overwrites it)
});
```

--------------------------------

### SweetAlert swal example

Source: https://github.com/t4t5/sweetalert/blob/master/docs/index.html

Displays a SweetAlert popup with title 'Oops', message 'Something went wrong!', and type 'error'. This is the primary example of using the swal function.

```javascript
swal ( "Oops" ,  "Something went wrong!" ,  "error" )
```

--------------------------------

### Internal usage example: stringToNode, insertAfter, getNode

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/utils.md

Shows how to build a DOM node from a string and insert it after another node using utility functions from the utils module.

```javascript
import { stringToNode, insertAfter, getNode } from './src/modules/utils';

const badge = stringToNode('<div class="badge">new</div>');
insertAfter(badge, getNode('swal-title'));
```

--------------------------------

### Loading state with closeModal: false and stopLoading - JavaScript example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/actions.md

Demonstrates using a button with closeModal: false to keep the modal open, then calling swal.stopLoading() after async work to remove the spinner and show a success message.

```javascript
const proceed = await swal({
  title: "Fetching data?",
  button: {
    text: "Search!",
    closeModal: false, // keep the modal open when clicked
  },
});

if (proceed) {
  const result = await fetch("/api/data");
  swal.stopLoading();       // remove the spinner from all buttons
  swal({ text: "Done!", icon: "success" });
}
```

--------------------------------

### Two text buttons example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-buttons.md

Shows how to pass an array of two strings as the buttons option. The first button (cancel) resolves with null, the second (confirm) resolves with true.

```javascript
import swal from 'sweetalert';

swal({
  title: "Save changes?",
  buttons: ["No", "Yes, save!"],
})
.then(value => {
  // "No" resolves with null (cancel default), "Yes, save!" resolves with true
});
```

--------------------------------

### AJAX request with fetch and SweetAlert

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/guides/index.md

Shows how to use SweetAlert's promise-based API with fetch to search the iTunes API. Uses content: "input" to get user input and closeModal: false to keep the modal open during the request. Handles errors and empty results.

```javascript
swal({
  text: 'Search for a movie. e.g. "La La Land".',
  content: "input",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(name => {
  if (!name) throw null;

  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
  return results.json();
})
.then(json => {
  const movie = json.results[0];

  if (!movie) {
    return swal("No movie was found!");
  }

  const name = movie.trackName;
  const imageURL = movie.artworkUrl100;

  swal({
    title: "Top result:",
    text: name,
    icon: imageURL,
  });
})
.catch(err => {
  if (err) {
    swal("Oh noes!", "The AJAX request failed!", "error");
  } else {
    swal.stopLoading();
    swal.close();
  }
});
```

--------------------------------

### Two text buttons

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-buttons.md

Example showing how to configure a dialog with two text buttons using an array. The first button (cancel) resolves with null, the second (confirm) resolves with true.

```APIDOC
## Two text buttons

### Description
Configure a SweetAlert dialog with two text buttons using an array. The first button acts as cancel (resolves with null), the second as confirm (resolves with true).

### Example
```javascript
import swal from 'sweetalert';

swal({
  title: "Save changes?",
  buttons: ["No", "Yes, save!"],
})
.then(value => {
  // "No" resolves with null (cancel default), "Yes, save!" resolves with true
});
```
```

--------------------------------

### More than two buttons (object form) — promise values

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-buttons.md

Example showing how to configure more than two buttons using an object. Each key maps to a button configuration, and the promise resolves with the button's value.

```APIDOC
## More than two buttons (object form) — promise values

### Description
Configure a SweetAlert dialog with multiple buttons using an object. Each key represents a button namespace, and the value can be a string, object, or boolean. The promise resolves with the button's value.

### Example
```javascript
swal({
  buttons: {
    cancel: "Run away!",
    catch:   { text: "Throw Pokéball!" },
    defeat:  true, // default: text "Defeat", value "defeat"
  },
})
.then(result => {
  if (result === "catch")  { /* … */ }
  if (result === "defeat") { /* thrown value "defeat" */ }
});
```
```

--------------------------------

### Close the open modal programmatically - JavaScript example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/actions.md

Shows how to use swal.close() and swal.close('confirm') to resolve the promise with the cancel value or a specific namespace's action value.

```javascript
import swal from 'sweetalert';

swal("Processing…", {
  button: { text: "Close", closeModal: false },
});

// …in async code:
swal.close();          // resolves the promise with the cancel value
// with a namespace:
swal.close('confirm'); // acts on the confirm button's action value
```

--------------------------------

### More than two buttons (object form) example

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-buttons.md

Demonstrates using an object to define multiple buttons with custom text and behavior. The 'catch' button resolves with the string 'catch', and 'defeat' resolves with the value 'defeat'.

```javascript
swal({
  buttons: {
    cancel: "Run away!",
    catch:   { text: "Throw Pokéball!" },
    defeat:  true, // default: text "Defeat", value "defeat"
  },
})
.then(result => {
  if (result === "catch")  { /* … */ }
  if (result === "defeat") { /* thrown value "defeat" */ }
});
```

--------------------------------

### timer option example

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Sets a timer to automatically close the modal after 3000 ms, often combined with buttons: false.

```javascript
swal("This modal will disappear soon!", {
  buttons: false,
  timer: 3000,
});
```

--------------------------------

### Set buttons with array mixing true and string

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Uses an array with true to get default options for the first button and a string for the second.

```javascript
swal({
  buttons: [true, "Do it!"],
});
```

--------------------------------

### dangerMode option example

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Enables dangerMode to turn the confirm button red and focus the cancel button, useful for dangerous confirmations.

```javascript
swal("Are you sure?", {
  dangerMode: true,
  buttons: true,
});
```

--------------------------------

### Example usage of swal with dismissal options (JavaScript)

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/event-listeners.md

Shows two swal() calls: one that closes on ESC and outside click, and a locked-down modal with no ESC/outside click and a 5-second timer. Both resolve with null on cancel.

```javascript
import swal from 'sweetalert';

// Escape key and outside click both close, resolving with null (cancel):
swal({ title: "Dismiss me", closeOnEsc: true, closeOnClickOutside: true });

// Locked-down modal: no ESC, no outside click, auto-dismiss after 5 s:
swal({
  title: "Please wait",
  buttons: false,
  closeOnEsc: false,
  closeOnClickOutside: false,
  timer: 5000, // fires onAction('cancel') -> resolves with null
}).then(value => {
  console.log("Closed by timer:", value); // null
});
```

--------------------------------

### Custom confirm value and className with error handling

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-buttons.md

Example showing how to customize a single confirm button with a custom value, className, and closeModal behavior, including error handling with stopLoading and close.

```APIDOC
## Custom confirm value and className with error handling

### Description
Configure a single confirm button with custom text, value, className, and closeModal behavior. The example demonstrates error handling using stopLoading and close.

### Example
```javascript
swal({
  button: {
    text: "Delete",
    value: "deleted",
    className: ["danger", "red-bg"],
    closeModal: false, // keep open; resolve happens anyway
  },
})
.then(value => {
  try {
    await deleteRecord(value); // "deleted"
    swal.stopLoading();
    swal.close('confirm');
  } catch (err) {
    swal.stopLoading(); // leave modal open to show the error
  }
});
```
```

--------------------------------

### Normal alert example

Source: https://github.com/t4t5/sweetalert/blob/master/docs/index.html

Shows a standard browser alert dialog with the message 'Oops, something went wrong!'. This is the baseline for comparison with SweetAlert's popup.

```javascript
alert ( "Oops, something went wrong!" )
```

--------------------------------

### Set global defaults with swal.setDefaults

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options.md

Configures global default options for all SweetAlert dialogs. The example sets an info icon, cancel button, and disables ESC dismissal, then shows a simple alert that uses these defaults.

```javascript
import swal from 'sweetalert';

swal.setDefaults({
  icon: "info",
  buttons: {
    cancel: true,
  },
  closeOnEsc: false,
});

swal("Notice"); // now opens with an info icon, cancel + confirm buttons, and no ESC dismissal
```

--------------------------------

### Custom DOM node content with React

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Recreates the input example using a React component as the content. Uses swal.setActionValue() to update the resolved value and initializes the confirm button's value to an empty string. Requires React and ReactDOM.

```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const DEFAULT_INPUT_TEXT = "";

class MyInput extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: DEFAULT_INPUT_TEXT,
    };
  }

  changeText(e) {
    let text = e.target.value;

    this.setState({
      text,
    });

    /*
     * This will update the value that the confirm
     * button resolves to:
     */
    swal.setActionValue(text);
  }

  render() {
    return (
      <input
        value={this.state.text}
        onChange={this.changeText.bind(this)}
      />
    )
  }
}

// We want to retrieve MyInput as a pure DOM node:

let wrapper = document.createElement('div');
ReactDOM.render(<MyInput />, wrapper);
let el = wrapper.firstChild;

swal({
  text: "Write something here:",
  content: el,
  buttons: {
    confirm: {
      /*
       * We need to initialize the value of the button to
       * an empty string instead of "true":
       */
      value: DEFAULT_INPUT_TEXT,
    },
  },
}).then((value) => {
  swal(`You typed: ${value}`);
});
```

--------------------------------

### Render React components in SweetAlert with @sweetalert/with-react

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Use this snippet to display a SweetAlert dialog that renders React components via JSX. Requires installing @sweetalert/with-react in addition to the main SweetAlert library.

```javascript
import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  <div>
    <h1>Hello world!</h1>
    <p>
      This is now rendered with JSX!
    </p>
  </div>
)
```

--------------------------------

### Create multiple buttons with custom values and text

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Use an object for `buttons` to define multiple buttons. Each button can have custom text and a custom resolved value. The `cancel` button defaults to `null`, `catch` resolves to `"catch"`, and `defeat` uses `true` to get default text and value. The `.then` handler processes the resolved value.

```javascript
swal("A wild Pikachu appeared! What do you want to do?", {
  buttons: {
    cancel: "Run away!",
    catch: {
      text: "Throw Pokéball!",
      value: "catch",
    },
    defeat: true,
  },
}).then((value) => {
  switch (value) {
    case "defeat":
      swal("Pikachu fainted! You gained 500 XP!");
      break;
    case "catch":
      swal("Gotcha!", "Pikachu was caught!", "success");
      break;
    default:
      swal("Got away safely!");
  }
});
```

--------------------------------

### Define buttonMarkup with loader

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/markup.md

Defines the button container with a button and a loader containing three divs. The loader is shown/hidden via CSS when the button gets the swal-button--loading class.

```typescript
export const buttonMarkup: string = `
  <div class="${BUTTON_CONTAINER}">
    <button class="${BUTTON}"></button>
    <div class="${BUTTON_LOADER}">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
`;
```

--------------------------------

### Define multiple buttons with an object in SweetAlert

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/guides/index.md

Pass an object to `buttons` to define any number of buttons and the values they resolve to when clicked. In this example, `cancel` resolves to `null` with text `"Run away!"`, and `catch` resolves to `"catch"` with text `"Throw Pokéball!"`.

```js
swal({
  title: "Are you sure?",
  text: 
```

```js
  buttons: {
    cancel: {
      text: "Run away!",
      value: null,
      visible: true,
      className: "",
      closeModal: true,
    },
    confirm: {
      text: 
```

```js
  },
});
```

--------------------------------

### Invalid positional argument examples

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/errors.md

Invalid positional arguments: non-string, non-element, non-plain-object params, and strings beyond index 2 cause errors. Each example shows the exact error message for the invalid argument.

```javascript
swal("Title", "Text", "error", "extra"); // string at index 3
// throws: "SweetAlert: 4th argument ('extra') is invalid"
```

```javascript
swal(42); // number (not DOM node, not plain object)
// throws: "SweetAlert: 1st argument ('42') is invalid"
```

```javascript
swal(null);
// throws: "SweetAlert: 1st argument ('null') is invalid"
```

--------------------------------

### closeOnEsc option example

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Sets closeOnEsc to false to prevent dismissing the modal with the ESC key.

```javascript
swal({
  closeOnEsc: false,
});
```

--------------------------------

### closeOnClickOutside option example

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Sets closeOnClickOutside to false to prevent dismissing the modal by clicking outside.

```javascript
swal({
  closeOnClickOutside: false,
});
```

--------------------------------

### Normalize options with getOpts (equivalent calls)

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options.md

Shows that calling getOpts with positional arguments is equivalent to passing an options object. Both produce the same normalized SwalOptions. Note that getOpts is not part of the public bundle.

```javascript
import { getOpts } from './src/modules/options'; // not part of the public bundle

getOpts("Oops!", "An error occurred!", "error");
// ≡ getOpts({
//   title: "Oops!",
//   text: "An error occurred!",
//   icon: "error",
// });
// both produce the same normalized SwalOptions
```

--------------------------------

### Prompt modal with input using async/await

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Opens a prompt modal with an input field. The user's input is logged in a follow-up alert using async/await.

```javascript
const value = await swal("Type something:", {
  content: "input",
});

swal(`You typed: ${value}`);
```

--------------------------------

### Load SweetAlert from CDN

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Include the SweetAlert script from unpkg to use the global swal variable.

```html
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
```

--------------------------------

### Option object not last

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/errors.md

When an options object is not the last argument, an error is thrown. The example shows the exact error message for an unexpected extra argument.

```javascript
swal({ title: "Hi" }, "extra");
// throws: "SweetAlert: Unexpected 2nd argument (extra)"
```

--------------------------------

### Error 1: Cannot set both 'button' and 'buttons' options!

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/errors.md

Thrown synchronously from the `swal()` call when both `button` and `buttons` keys are present in the merged options fragment.

```APIDOC
## Error 1: Cannot set both 'button' and 'buttons' options!

### Description
Thrown synchronously from the `swal()` call when both `button` and `buttons` keys are present in the merged options fragment.

### Trigger Condition
Both `button` and `buttons` keys are present in the (merged) options fragment.

### When Thrown
Synchronously, from `swal()`.

### Message
`"Cannot set both 'button' and 'buttons' options!"`

### Source
`src/modules/options/index.ts:74` (`pickButtonParam`)
```

--------------------------------

### Fetch API integration using async/await

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Shows a modal that, when confirmed, fetches data from the PokeAPI and logs the result. Errors are caught and displayed in an error alert using async/await.

```javascript
const willSearch = await swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
});

if (willSearch) {
  try {
    const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
    const json = await result.json();
    console.log(json);
  } catch (err) {
    swal("Oops!", "Seems like we couldn't fetch the info", "error");
  }
}
```

--------------------------------

### Hide all buttons with swal("Hello world!", { buttons: false })

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Hides all buttons by setting buttons to false, same as the button option.

```javascript
swal("Hello world!", {
  buttons: false,
});
```

--------------------------------

### init function - src/modules/init/index.ts

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/init.md

Entry point for DOM initialization. On first call, appends overlay and modal if not present. Throws an error if called before DOM load. Then re-renders modal content and adds event listeners.

```typescript
// src/modules/init/index.ts:14-32 — actual source body
export const init = (opts: SwalOptions): void => {
  const modal: Element = getNode(MODAL);

  if (!modal) {
    if (!document.body) {
      throwErr("You can only use SweetAlert AFTER the DOM has loaded!");
    }

    initOverlayOnce();
    initModalOnce();
  }

  initModalContent(opts);
  addEventListeners(opts);
};

export default init;
```

--------------------------------

### Show alert with title and text

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Pass two arguments: the first is the title, the second is the text.

```javascript
swal("Here's the title!", "...and here's the text!");
```

--------------------------------

### Catching the string thrown by throwErr via its public path

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/utils.md

Demonstrates how to catch the validation error thrown by SweetAlert when invalid options are passed, checking if the error is a string starting with 'SweetAlert:'.

```javascript
try {
  swal({ button: "x", buttons: ["a", "b"] });
} catch (err) {
  if (typeof err === "string" && err.startsWith("SweetAlert:")) {
    // handle validation error
  }
}
```

--------------------------------

### Querying DOM with class names

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/class-list.md

Demonstrates querying DOM elements by the class names defined in CLASS_NAMES, such as .swal-modal and .swal-button__loader.

```javascript
// Programmatic DOM access using the same names the library uses:
const modal = document.querySelector('.swal-modal');
const loader = document.querySelector('.swal-button__loader');
```

--------------------------------

### Configure multiple buttons with swal({ buttons: ... })

Source: https://github.com/t4t5/sweetalert/blob/master/docs/docs/index.html

Specify the exact amount of buttons and their behaviour. Can use an array of strings, ButtonOptions, or a combination. Set to false to hide all buttons.

```javascript
swal({
  buttons: ["Stop", "Do it!"],
});
```

```javascript
swal({
  buttons: [true, "Do it!"],
});
```

```javascript
swal("Hello world!", {
  buttons: false,
});
```

```javascript
swal({
  buttons: {
    cancel: true,
    confirm: true,
  },
});
```

```javascript
swal({
  buttons: {
    cancel: true,
    confirm: "Confirm",
    roll: {
      text: "Do a barrell roll!",
      value: "roll",
    },
  },
});
```

--------------------------------

### AJAX request with fetch and input content

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Uses SweetAlert's promise-based API with fetch to search the iTunes API. Sets content to "input" to show an input field and retrieve its value. Handles errors and closes the modal on cancel.

```javascript
swal({
  text: 'Search for a movie. e.g. "La La Land".',
  content: "input",
  button: {
    text: "Search!",
    closeModal: false,
  },
}).then(name => {
  if (!name) throw null;

  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
}).then(results => {
  return results.json();
}).then(json => {
  const movie = json.results[0];

  if (!movie) {
    return swal("No movie was found!");
  }

  const name = movie.trackName;
  const imageURL = movie.artworkUrl100;

  swal({
    title: "Top result:",
    text: name,
    icon: imageURL,
  });
}).catch(err => {
  if (err) {
    swal("Oh noes!", "The AJAX request failed!", "error");
  } else {
    swal.stopLoading();
    swal.close();
  }
});
```

--------------------------------

### Show alert with icon

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Add a third argument to set an icon. Predefined icons: "warning", "error", "success", "info".

```javascript
swal("Good job!", "You clicked the button!", "success");
```

--------------------------------

### Prompt modal with input using promises

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Opens a prompt modal with an input field. The user's input is logged in a follow-up alert using a promise.

```javascript
swal("Type something:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});
```

--------------------------------

### Import and use sweetalert

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Import the default export from 'sweetalert' and call it with a message string to display a basic alert dialog.

```javascript
import swal from 'sweetalert';

swal("Hello world!");
```

--------------------------------

### Combine positional arguments with options

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Use the first syntax (title, text, icon) and add an options object as the fourth argument.

```javascript
swal("Good job!", "You clicked the button!", "success", {
  button: "Aww yiss!",
});
```

--------------------------------

### Default button configuration

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Default configuration for the confirm button. Shows the default ButtonOptions object.

```javascript
{
  text: "OK",
  value: true,
  visible: true,
  className: "",
  closeModal: true,
}
```

--------------------------------

### Hide button with swal("Hello world!", { button: false })

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Hides the confirm button by setting button to false.

```javascript
swal("Hello world!", {
  button: false,
});
```

--------------------------------

### Error 6: You can only use SweetAlert AFTER the DOM has loaded!

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/errors.md

Thrown asynchronously by rejecting the `swal()` promise when `init` is called before the DOM is ready.

```APIDOC
## Error 6: You can only use SweetAlert AFTER the DOM has loaded!

### Description
Thrown asynchronously by rejecting the `swal()` promise when the DOM is not yet loaded.

### Trigger Condition
`init` is called while the modal is not yet in the DOM and `document.body` is missing (script executed before the DOM is ready).

### When Thrown
**Async** — rejects the `swal()` promise (thrown inside the `Promise` executor).

### Message
`"You can only use SweetAlert AFTER the DOM has loaded!"`

### Source
`src/modules/init/index.ts:24`
```

--------------------------------

### swal (multiple arguments)

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/core.md

Shows an alert dialog with title, text, and icon provided as separate arguments. Throws a string error if an invalid argument is passed.

```APIDOC
## swal (multiple arguments)

### Description
Shows an alert dialog with title, text, and icon provided as separate arguments. Throws a string error if an invalid argument is passed.

### Method
swal

### Signature
`swal(title: string, text: string, icon: string): Promise<boolean>`

### Parameters
- **title** (string) - Required - The title of the alert.
- **text** (string) - Required - The main text content of the alert.
- **icon** (string) - Required - The icon to display (e.g., "success", "error").

### Request Example
```javascript
swal("Deleted!", "Your imaginary file has been deleted!", "success");
```

### Error Handling
If an invalid argument is passed (e.g., a fourth argument), a string error is thrown: `"SweetAlert: 4th argument ('extra') is invalid"`.
```

--------------------------------

### Fetch API integration using promises

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Shows a modal that, when confirmed, fetches data from the PokeAPI and logs the result. Errors are caught and displayed in an error alert.

```javascript
swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(willSearch => {
  if (willSearch) {
    return fetch("http://pokeapi.co/api/v2/pokemon/1");
  }
})
.then(result => result.json())
.then(json => console.log(json))
.catch(err => {
  swal("Oops!", "Seems like we couldn't fetch the info", "error");
});
```

--------------------------------

### initButtons function implementation

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/init.md

Initializes the modal footer with buttons. It creates a footer element, iterates over the button list, and appends each visible button. If no buttons are visible, the footer is removed. The private getButton function builds the button markup, sets text content, registers actions, and binds click listeners.

```typescript
// src/modules/init/buttons.ts:68-93 — actual source body
const initButtons = (buttons: ButtonList, dangerMode: boolean): void => {
  const footerEl: Element = injectElIntoModal(footerMarkup);

  for (let key in buttons) {
    const buttonOpts: ButtonOptions = buttons[key] as ButtonOptions;
    const buttonEl: Node = getButton(key, buttonOpts, dangerMode);

    if (buttonOpts.visible) {
      footerEl.appendChild(buttonEl);
    }
  }

  /* If the footer has no buttons, there's no point in keeping it: */
  if (footerEl.children.length === 0) {
    footerEl.remove();
  }
};

export default initButtons;
```

--------------------------------

### Use custom content with swal({ content: ... })

Source: https://github.com/t4t5/sweetalert/blob/master/docs/docs/index.html

For custom content beyond text and icons. Can be a string like "input" or a DOM element.

```javascript
swal({
  content: "input",
});
```

```javascript
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});
```

```javascript
var slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider,
});
```

--------------------------------

### Import SweetAlert in JavaScript

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/index.md

Shows ES module, CommonJS, and script tag usage. The script tag exposes global `swal` and `sweetAlert` variables.

```javascript
// ES modules / webpack / browserify:
import swal from 'sweetalert';

// CommonJS:
const swal = require('sweetalert');

// Script tag (unpkg / jsDelivr):
// <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
// -> global variable: swal (also sweetAlert)
```

--------------------------------

### Both button and buttons options provided

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/errors.md

Calling swal with both 'button' and 'buttons' options throws an error. The check is in pickButtonParam (src/modules/options/index.ts:66-78) with the condition singleButton !== undefined && buttonList !== undefined.

```javascript
swal({
  button: "OK",
  buttons: ["No", "Yes"],
});
// throws: "SweetAlert: Cannot set both 'button' and 'buttons' options!"
```

--------------------------------

### Default buttons configuration

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Default configuration for the cancel and confirm buttons. Shows the default ButtonList object.

```javascript
{
  cancel: {
    text: "Cancel",
    value: null,
    visible: false,
    className: "",
    closeModal: true,
  },
  confirm: {
    text: "OK",
    value: true,
    visible: true,
    className: "",
    closeModal: true
  }
}
```

--------------------------------

### initContent function in TypeScript

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/init.md

Initializes modal content by injecting a container and either creating a predefined element from a string or appending a DOM node. If opts is null, it returns early. For string elements, it uses initPredefinedContent to create an element with the class swal-content__{elName} and copies attributes. For input elements, it adds input events that update the action value and trigger confirmation on Enter.

```typescript
const initContent = (opts: ContentOptions): void => {
  if (!opts) return;

  const content: Node = injectElIntoModal(contentMarkup);

  const { element, attributes } = opts;

  if (typeof element === "string") {
    initPredefinedContent(content, element, attributes);
  } else {
    content.appendChild(element);
  }
};

export default initContent;
```

--------------------------------

### Show a basic alert

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Call swal with a single message string. Must be called after the DOM has loaded.

```javascript
swal("Hello world!");
```

--------------------------------

### initModalOnce function - src/modules/init/modal.ts

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/init.md

Appends the swal-modal element to the overlay. Runs once; subsequent calls reuse the existing modal.

```typescript
const initModalOnce = (): void => {
  const overlay: Element = getNode(OVERLAY);
  const modal = stringToNode(modalMarkup);

  overlay.appendChild(modal);
};
```

--------------------------------

### Theming CSS Classes

Source: https://github.com/t4t5/sweetalert/blob/master/docs/docs/index.html

CSS classes for customizing the appearance of SweetAlert modal components.

```APIDOC
## Theming CSS Classes

### Description
CSS classes for styling the SweetAlert modal and its components.

### Classes
- **swal-overlay** - The overlay behind the modal.
- **swal-modal** - The modal container.
- **swal-title** - The title element.
- **swal-text** - The text content area.
- **swal-footer** - The footer area.
- **swal-button** - The modal's buttons. Has an extra class `swal-button--{type}` (e.g., `swal-button--confirm`).

### Examples
```css
.swal-overlay {
  background-color: rgba(43, 165, 137, 0.45);
}

.swal-modal {
  background-color: rgba(63,255,106,0.69);
  border: 3px solid white;
}

.swal-title {
  margin: 0px;
  font-size: 16px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
  margin-bottom: 28px;
}

.swal-text {
  background-color: #FEFAE3;
  padding: 17px;
  border: 1px solid #F0E1A1;
  display: block;
  margin: 22px;
  text-align: center;
  color: #61534e;
}

.swal-footer {
  background-color: rgb(245, 248, 250);
  margin-top: 32px;
  border-top: 1px solid #E9EEF1;
  overflow: hidden;
}

.swal-button {
  padding: 7px 19px;
  border-radius: 2px;
  background-color: #4962B3;
  font-size: 12px;
  border: 1px solid #3e549a;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
```
```

--------------------------------

### Implementation of swal function

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/core.md

The actual source body of the `swal` function. It guards against Node environments, normalizes arguments, stores the promise resolve/reject, initializes the modal, and opens it on the next tick for the fade animation.

```typescript
// src/core.ts:40-57 — actual source body
const swal:SweetAlert = (...args) => {
  // Prevent library to be run in Node env:
  if (typeof window === 'undefined') return;

  const opts: SwalOptions = getOpts(...args);

  return new Promise<any>((resolve, reject) => {
    state.promise = { resolve, reject };
    init(opts);
    // For fade animation to work:
    setTimeout(() => {
      openModal();
    });
  });
};
```

--------------------------------

### Import SweetAlert in JavaScript

Source: https://github.com/t4t5/sweetalert/blob/master/docs/guides/index.html

Import the default export from 'sweetalert' to use the swal function.

```javascript
import swal from 'sweetalert';
```

--------------------------------

### Warning message with confirmation using async/await

Source: https://github.com/t4t5/sweetalert/blob/master/README.md

Shows a warning modal with danger mode enabled. The confirm action is handled with async/await, and a success alert is shown if the user confirms.

```javascript
const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
});

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}
```

--------------------------------

### Set content with a DOM element

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Creates a range input element and passes it as the content.

```javascript
var slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider,
});
```

--------------------------------

### Set buttons with ButtonList object (cancel and confirm)

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Specifies a ButtonList object with cancel and confirm keys set to true to use default options.

```javascript
swal({
  buttons: {
    cancel: true,
    confirm: true,
  },
});
```

--------------------------------

### Add custom class with swal("Hello world!", { className: "red-bg" })

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Adds a custom class to the modal for styling purposes.

```javascript
swal("Hello world!", {
  className: "red-bg",
});
```

--------------------------------

### Set button options with swal({ button: { text: "Hey ho!" } })

Source: https://github.com/t4t5/sweetalert/blob/master/docs-src/docs/index.md

Tweaks button settings by passing a ButtonOptions object. Here, the text is set to 'Hey ho!'.

```javascript
swal({
  button: {
    text: "Hey ho!",
  },
});
```

--------------------------------

### SwalState and ActionOptions interfaces

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/state.md

Defines the shape of the global state object and the options for setting action values. SwalState includes isOpen, promise, actions, and timer fields. ActionOptions maps button namespaces to value and closeModal properties.

```typescript
// src/modules/state.ts:3-26
export interface SwalState {
  isOpen: boolean,
  promise: {
    resolve?(value: string): void,
    reject?(): void,
  },
  actions: {
    [namespace: string]: {
      value?: string | any,
      closeModal?: boolean
    },
  },
  timer: number,
};

export interface ActionOptions {
  [buttonNamespace: string]: {
    value?: string,
    closeModal?: boolean
  },
};
```

--------------------------------

### swal() — Positional Parameter Syntax

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/configuration.md

Documentation for the positional parameter syntax of the swal() function, including call shapes and error handling.

```APIDOC
## swal() — Positional Parameter Syntax

### Description
Allows calling the SweetAlert function with positional arguments that are interpreted into an options object. The interpretation depends on the number and type of arguments passed.

### Method
Function call

### Parameters
#### Positional Arguments
- **arg1** (string | DOMNode | object) - Required - First argument. If string, interpreted as `text` (if only one argument) or `title` (if more arguments). If DOMNode, interpreted as `content`. If object, used as the options object directly.
- **arg2** (string | object) - Optional - If first argument is string, interpreted as `text`. If first argument is DOMNode, must be a plain options object.
- **arg3** (string) - Optional - If first argument is string, interpreted as `icon`. A 4th argument, if present, must be a plain options object.
- **arg4** (object) - Optional - Must be a plain options object.

### Call Shapes
- `swal("text")` → `{ text: "text" }`
- `swal("title", "text")` → `{ title: "title", text: "text" }`
- `swal("title", "text", "icon")` → `{ title, text, icon }`
- `swal(<DOMNode>)` → `{ content: <DOMNode> }`
- `swal({ ...opts })` → the object itself; must be the last argument

### Error Handling
- If a string is provided at position ≥ 3, throws `"Nth argument ('x') is invalid"`.
```

--------------------------------

### Define icon, title, text, and footer markup

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/markup.md

Defines the four top-level content container templates: icon, title, text, and footer. Each uses a CSS class constant and produces a simple div.

```typescript
export const iconMarkup: string = `
  <div class="${ICON}"></div>`
;

export const titleMarkup: string = `
  <div class="${MODAL_TITLE}"></div>
`;

export const textMarkup: string = `
  <div class="${MODAL_TEXT}"></div>`
;

export const footerMarkup: string = `
  <div class="${FOOTER}"></div>
`;
```

--------------------------------

### swal.setDefaults(opts)

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/core.md

Sets default options for future swal calls.

```APIDOC
## swal.setDefaults(opts)

### Description
Sets default options for future swal calls.

### Method
Function call

### Endpoint
swal.setDefaults(opts)

### Parameters
#### Path Parameters
- `opts` (object) - Required - The default options to set.

### Response
No return value documented.
```

--------------------------------

### swal (basic message)

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/core.md

Shows a basic alert dialog with the given message. Resolves with `true` when the OK button is clicked.

```APIDOC
## swal (basic message)

### Description
Shows a basic alert dialog with the given message. Resolves with `true` when the OK button is clicked.

### Method
swal

### Signature
`swal(message: string): Promise<boolean>`

### Parameters
- **message** (string) - Required - The message to display in the alert.

### Request Example
```javascript
import swal from 'sweetalert';

swal("Hello world!");
```

### Response
Resolves with `true` when the OK button is clicked.
```

--------------------------------

### Define ButtonOptions and ButtonList interfaces

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/options-buttons.md

Interfaces for per-button options and the mapping of button namespaces to options or booleans.

```typescript
// src/modules/options/buttons.ts:7-14
export interface ButtonOptions {
  visible?: boolean,
  text?: string,
  value?: any,
  className?: string | Array<string>,
  closeModal?: boolean,
};

export interface ButtonList {
  [buttonNamespace: string]: ButtonOptions | boolean,
};
```

--------------------------------

### swal.getState()

Source: https://github.com/t4t5/sweetalert/blob/master/_autodocs/api-reference/core.md

Returns the current state of the modal.

```APIDOC
## swal.getState()

### Description
Returns the current state of the modal.

### Method
Function call

### Endpoint
swal.getState()

### Parameters
None.

### Response
Returns the current `SwalState` object.
```
Tokens:
Raw