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!

Poistion

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

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.

Options

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 Colors

Theme Layout
Light
Dark
Semi Dark

Collapse Sidebar
Collapse Menu

Navbar Colors

Footer Type

Hide Scroll To Top
Buy Now