Color Switcher

Thema Sweet Alert

Thema sweet alert examples.

Sweet Alert

A beautiful replacement for javascript's alert. Available in CSS, Sass, and LESS. For more info just visit here.

A basic message

swal("Here's a message!")

A title with a text under

swal("Here's a message!", "It's pretty, isn't it?")

A success message!

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

A warning message, with a function attached to the "Confirm"-button...

swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false }, function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success"); });

... and by passing a parameter, you can execute something else for "Cancel".

swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false }, function(isConfirm){ if (isConfirm) { swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else { swal("Cancelled", "Your imaginary file is safe :)", "error"); } });

A message with a custom icon

swal({ title: "Sweet!", text: "Here's a custom image.", imageUrl: "images/thumbs-up.jpg" });

An HTML message

swal({ title: "HTML Title!", text: "A custom <span style='color:#F8BB86'>html<span> message.", html: true });

A message with auto close timer

swal({ title: "Auto close alert!", text: "I will close in 2 seconds.", timer: 2000, showConfirmButton: false });