loading
POS

Default 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!

Poistion

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

Options

There are multiple options for the alert to be displayed, each having its own speciality

Animations

Use customClass parameter to add animation to your alert

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.

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.

Theme Config


Theme Layout

RTL Layout

Theme Colors