Sweet Alerts

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!

Types

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.

Options

Custom Icon

icon is used to add a customized icon for the modal. Should contain a string with the path to the image.

Auto Close Timer

A message with auto close timer. timer is default set to null. You can set timer in ms (milliseconds).

Close on click outside

If closeOnClickOutside is set to true, the user can dismiss the modal by clicking outside it.

Show Cancel Button

You can set buttons: true to show both buttons, or buttons: false to hide all buttons. By default, only the confirm button is shown.

Prompt Function

A replacement for the "prompt" function. You can set content as "input" to get a prompt modal.

Ajax Request

Search for a movie. e.g. "La La Land" to view the AJAX request for example.

Confirm Options

Confirm Button Text

Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".

Confirm Button Color

Use className: "btn-warning" option to change the background color of the "Confirm"-button.

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now