Basic Examples

SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below!


You can specify position of your alert with position : { top-start | top-end | bottom-start | bottom-end } in js.


The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "icon" or passed as the third parameter of the function.


Confirm Options

Confirm Button Text

Use confirmButtonText: "Your text here!" option to change the text of the "Confirm" button.

Confirm Button Color

Use confirmButtonClass: "btn btn-{colorName}" option to change the color of the "Confirm" button.