DocumentationEnglish flag

Constructor

If you use swalstrap5.js or swalstrap5.min.js:
<script src="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/dist/js/swalstrap5.min.js"></script>
only Swalstrap class wil be loaded. To use Swalstrap you must load swalstrap stylesheet:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/docs/assets/css/swalstrap.min.css">
and create at least an instance of Swalstrap class:
<script>
    const mySwal = new Swalstrap();
</script>
If you use swalstrap5_all.js or swalstrap5_all.min.js instead:
<script src="https://cdn.jsdelivr.net/npm/@magicbruno/swalstrap5@1.0.8/dist/js/swalstrap5_all.min.js"></script>
CSS styles will be loaded automatically and a default instance of Swalstrap named Swal (ad aliased as swal, Sweetalert and sweetalert) will be created.

In both cases, you may create customized instances of Swalstrap passing a set of options as parameter of the constructor. This options will became the default options applied to popups and toasts open with the fire method. See here a working example.

Options

Property Type Default Description
title
 string '' The title of the popup, as HTML.
titleText
 string '' The title of the popup, as text. Useful to avoid HTML injection.
html
 string '' A HTML content for the popup.
If text and html parameters are provided in the same time, html will be used. 
Swalstrap does NOT sanitize this parameter. It is the developer's responsibility to escape any user input when using the html option, so XSS attacks would be prevented.
text
 string '' A text content for the popup.
If text and html parameters are provided in the same time, html will be used.
icon
 'warning' | 'error' | 'success' | 'info' | 'question' | undefined undefined The icon of the popup. Swalstrap comes with 5 built-in icons which will show a corresponding icon animation: warning, error, success, info, and question.
backdrop
 boolean true Whether or not the popup should show a full screen click-to-dismiss backdrop.
toast
 boolean false Whether or not an alert should be treated as a toast notification. This option is normally coupled with the position parameter and a timer. 
toastStyle
 'primary' | 'secondary' | 'success' | 'info' | 'danger' | 'warning' | 'dark' | 'auto' | '' '' By default toast background color is inherited form Bootstrap. If you set toastStyle, toast background are styled using bootstrap colors. Icon and foreground color will be white. If toastStyle is 'auto', toast style is determined by icon type.
input

'text' | 'email' | 'password' | 'number' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'file' | 'url' | undefined

 undefined Input field type, can be text, email, password, number, textarea, select, radio, checkbox, file and url.
position

'top' | 'top-start' | 'top-end' | 'center' | 'center-start' | 'center-end' | 'bottom' | 'bottom-start' |  'bottom-end'

   Toast position, can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'. Popup position can be 'center' or 'top' (all other settings will be ignored)
customClass
 object {} A custom CSS class for the popup. These are the default classes: 
                    {
    container: '',
    popup: '',
    header: 'py-0 border-0 px-3 mt-3 mb-1',
    title: 'text-center h2 mt-3 mb-3',
    toastTitle: 'my-0 h5',
    closeButton: 'btn-close',
    icon: '',
    image: 'img-fluid mx-auto mt-4 mb-3',
    htmlContainer: 'text-center lead',
    toastHtml: '',
    input: 'mt-3 mb-1',
    inputLabel: '',
    validationMessage: `justify-content-center d-flex rounded-0 align-items-center 
        border-0 py-2 px-4 mt-3 mb-1 alert alert-danger`,
    actions: 'justify-content-center border-0 py-0 px-4 mt-3 mb-1',
    confirmButton: 'btn btn-primary',
    denyButton: 'btn btn-danger',
    cancelButton: 'btn btn-secondary',
    loader: '',
    footer: 'justify-content-center py-0 pt-2 px-4 mt-3 mb-1',
    timerProgressBar: ''
}
timer
 number 0 Auto close timer of the popup (or of the toast notification). Set in ms (milliseconds).
timerProgressBar
 boolean false If set to true, the timer will have a progress bar at the bottom of the popup. (It doesn't affect toasts)
allowOutsideClick
 boolean true If set to false, the user can't dismiss the popup by clicking on the backdrop.
allowEscapeKey
 boolean true If set to false, the user can't dismiss the popup by pressing the Esc key.
showConfirmButton
 boolean true If set to false, a "Confirm" button will not be shown.
showDenyButton
 boolean false If set to true, a "Deny" button will be shown. It can be useful when you want a popup with 3 buttons.
showCancelButton
 boolean false If set to true, a "Cancel" button will be shown, which the user can click on to dismiss the modal.
confirmButtonText
 string 'Ok' Use this to change the text on the "Confirm" button.
denyButtonText
 string 'No' Use this to change the text on the "Deny" button.
cancelButtonText
 string 'Cancel' Use this to change the text on the "Cancel" button.
showCloseButton
 boolean false Set to true to show close button in top right corner of the popup.
preConfirm
 function | undefined undefined Function to execute before confirming, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value
See ajax request example.
preDeny
 function | undefined undefined Function to execute before denying, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value
imageUrl
 string '' Add a customized icon or image for the popup. Should contain a string with the path or URL to the image.
imageAlt
 string '' An alternative text for the custom image.
inputPlaceholder
 string '' Input field placeholder.
inputValue
 string ''

Input field initial value.

  • If the input type is select, inputValue will represent the selected <option> .
  • If the input type is checkboxinputValue will represent the checked state.
  • If the input type is text, email, number or textarea inputValue represent the initial value of the field.
inputOptions
 object {} If input parameter is set to "select" or "radio", you can provide options. Can be a plain object, with keys that represent option values and values that represent option text.
inputAttributes
 object {} HTML input attributes (e.g. min, max, autocomplete, accept), that are added to the input field. Object keys will represent attributes names, object values will represent attributes values.
validationMessage
 string '' A custom validation message for default validation (email and url input types).
willOpen
 function | undefined undefined Popup lifecycle hook. Synchronously runs before the popup is shown on screen. Provides popup DOM element as the argument.
didOpen
 function | undefined undefined Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen. Provides popup DOM element as the argument.
willClose
 function | undefined undefined Popup lifecycle hook. Synchronously runs when the popup closes by user interaction (and not due to another popup being fired). Provides popup DOM element as the argument.
didClose
 function | undefined undefined Popup lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to another popup being fired).

Methods

Method Returns Description
Swal.isVisible()
 boolean Determine if popup is shown.
Swal.close()
 void Close the currently open SweetAlert2 popup programmatically, the Promise returned by Swal.fire() will be resolved with an empty object { }
Swal.getContainer()
 HTMLElement Get the popup container which contains the backdrop and the popup itself.
Swal.getTitle()
 HTMLElement Get the popup title.
Swal.getCloseButton()
 HTMLElement Get the close button.
Swal.getIcon()
 HTMLElement Get the icon.
Swal.getHtmlContainer()
 HTMLElement Gets the DOM element where the html/text parameter is rendered to.
Swal.getImage()
 HTMLElement Get the image.
Swal.getFooter()
 HTMLElement Get the popup footer.
Swal.getConfirmButton()
 HTMLElement Get the "Confirm" button.
Swal.getDenyButton()
 HTMLElement Get the "Deny" button.
Swal.getCancelButton()
 HTMLElement Get the "Cancel" button.
Swal.showLoading()
 void Shows loader (spinner), this is useful with AJAX requests.

The loader be shown instead of buttons in the middle of the action area.
Swal.hideLoading()
 void Hides loader and shows back the button which was hidden by .showLoading()
Swal.isLoading()
 boolean Determine if popup is in the loading state. Related methods: Swal.showLoading() and Swal.hideLoading()
Swal.getTimerLeft()
 number Returns the time left in case when timer parameter is set. See basic timer example.
Swal.stopTimer()
 number Stops the timer in case when timer parameter is set. Returns the time left. See timer method example.
Swal.resumeTimer()
 number Resume the timer previously stopped. Returns the time left. See timer method example.
Swal.toggleTimer()
 number Toggle state of the timer between stopped and running. Returns the time left. See timer method example.
Swal.isTimerRunning()
 boolean Returns the status of the timer: true if is running, false if it's paused.
Swal.increaseTimer(number n)
 number Increase the timer by n milliseconds. Returns the time left. See timer method example.
Swal.getInput()
 HTMLElement Get the input DOM node, this method works with input parameter.
Swal.getInputValue()
 boolean | string Get the value of the input. If input is text, email, password, number, textarea, url or select returns the value of the element, if input is checkbox returns the checkbox state (true | false), if input is radio return the value of checked option or null if none is checked.
Swal.showValidationMessage(string message)
 void Show an error message inside the validation message DOM node. Passing an empty string as parameter will hide the node.
Swal.getValidationMessage()
 HTMLElement Get the validation message DOM node.