Logo

Dreams Technologies

My Profile Settings Logout
Sweetalerts

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!

Position

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

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

Customizer

Customize your overview Page layout

Close Icon
Layout
Choose your layout
Vertical
Horizontal
Two Column
Color Scheme
Choose Light or Dark Scheme.
Orange
Light
Dark
Blue
Maroon
Purple
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.
Light
Dark
Buy Now