Javascript SweetAlert: Create Beautiful Alert Popup

SweetAlert is a javascript library which makes popup messages easy and pretty.

Download and Install

//use npm
npm install sweetalert
//use CDN: you can also find SweetAlert on unpkg and jsDelivr and use the global swal variable.
https://unpkg.com/sweetalert/dist/sweetalert.min.js

SweetAlert Examples

//a sweet alert with only title and content
swal("A title", "Content goes here");

//more configurations
swal({
	title: "Popup title", 
	text: "Congratulations! The article was updated successfully.", 
	icon: "success",
	button: {
	  text: "Confirm",
	  value: true,
	  visible: true,
	  className: "",
	  closeModal: true,
	},
	className: "customClass",
	closeOnClickOutside: false,
	closeOnEsc: false,
	dangerMode: true,
	timer: 5000,
});

//with forms
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Your Age",
      type: "number",
    },
  },
});

  • title: the title of the modal
  • text: the main content of modal
  • icon: there are 4 built-in icons that you can use – success, info, warning, and error.
  • button: this is the default confirm button. If you want to replace both cancel and confirm buttons, you need to use buttons parameter.
  • className: apply a custom class name to the modal.
  • closeOnClickOutside: determine whether the modal is closed if user click outside of the modal.
  • closeOnEsc: determine whether the modal is closed when user presses Escape.
  • dangerMode: this is useful to show warning message. If this value is set to true, confirm button’s background is turned into red.
  • timer: the modal is closed after x miliseconds.

Leave a Comment

Your email address will not be published. Required fields are marked *

We care about your privacy and data security. Google serves cookies to analyse traffic and show ads on this site. By using this site you agree to these cookies being set. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close