Alert (SweetAlert2)

Properties

Title: string

The title of the modal, as HTML. It can either be added to the object under the key “title” or passed as the first parameter of the function.

TitleText: string

The title of the modal, as text. Useful to avoid HTML injection.

Text: string

A description for the modal. It can either be added to the object under the key “text” or passed as the second parameter of the function.

HTML: string

A HTML description for the modal. If “Text” and “HTML” parameters are provided in the same time, “Text” will be used.

Type: string

Default: info

The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info, and question.

Footer: string

The footer of the modal. Can be either plain text or html.

Backdrop: boolean

Default: true

Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop.

Toast: boolean

Default: false

Whether or not an alert should be treated as a toast notification. This option is normally coupled with the Position parameter and a timer. Toasts are NEVER auto focused.

Position: string

Default: center

Modal window position, can be top, top-start, top-end, center, center-start, center-end, bottom, bottom-start, or bottom-end.

Timer: integer

Auto close timer of the modal. Set in ms (milliseconds).

Animation: boolean

Default: true

If set to false, modal CSS animation will be disabled.

AllowOutsideClick: boolean

Default: false

If set to false, the user can’t dismiss the modal by clicking outside it.

AllowEscapeKey: boolean

Default: false

If set to false, the user can’t dismiss the modal by pressing the Esc key.

AllowEnterKey: boolean

Default: false

If set to false, the user can’t confirm the modal by pressing the Enter or Space keys, unless they manually focus the confirm button.

ShowConfirmButton: boolean

Default: true

If set to false, a “Confirm”-button will not be shown. It can be useful when you’re using custom html description.

ShowCancelButton: boolean

Default: false

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

ConfirmButtonText: string

Default: OK

Use this to change the text on the “Confirm”-button.

CancelButtonText: string

Default: Cancel

Use this to change the text on the “Cancel”-button.

ConfirmButtonColor: string

Default: #3085d6

Use this to change the background color of the “Confirm”-button.

CancelButtonColor: string

Default: #aaa

Use this to change the background color of the “Cancel”-button.

FocusConfirm: boolean

Default: true

Set to false if you want to focus the first element in tab order instead of “Confirm”-button by default.

FocusCancel: boolean

Default: false

Set to true if you want to focus the “Cancel”-button by default.

ShowCloseButton: boolean

Default: false

Set to true to show close button in top right corner of the modal.

Try It