1. Home
  2. Extra Components
  3. Sweet Alerts

Sweet Alerts

Replacement for javascript's 'alert'

Advanced CardButtons Extended

A BEAUTIFUL REPLACEMENT FOR JAVASCRIPT'S 'ALERT'

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 "type" or passed as the third parameter of the function.

Options

Custom Icon

imageUrl 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).

Allow Outside Click

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

Show Cancel Button

If showCancelButton set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.

Prompt Function

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

Ajax Request

Set showLoaderOnConfirm to true to disable the buttons and show that something is loading. 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 confirmButtonColor option to change the background color of the "Confirm"-button. It must be a HEX value.

Animations

If set to false, the modal's animation will be disabled. Possible (string) values : pop (default when animation set to true), slide-from-top, slide-from-bottom