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.


Use popup inside showClass parameter to add animation to your alert.


The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "success", "error", "warning" 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
Confirm Button Color

Theme Customizer

Customize & Preview in Real Time


Menu Collapsed

Navbar Color