Notifications

Labels

Default Primary Success Info Warning Danger

Alerts

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Holy guacamole! You should check in on some of those fields below.

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 customizeable, as you can see below!

A basic message

A title with a text under

A success message!

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

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

An html message

Bootstrap Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Trigger Modal with :

Main

Labels

Alerts

Bootstrap Modal