General Options

Reference

Here are the keys that you can use if you pass an object into sweetAlert2:

Title¶

The title of the popup, as HTML.

.Title("title")

TitleText¶

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

.TitleText("example")

Html¶

A HTML description for the popup. If text and html parameters are provided in the same time, html will be used.

.Html("<p>text</p>")

Text¶

A description for the popup. If text and html parameters are provided in the same time, html will be used.

.Text("popup text")

Icon¶

The icon of the popup. SweetAlert2 comes with 5 built-in icon which will show a corresponding icon animation.

.Icon(SwalIcon.Info)

IconColor¶

Use this to change the color of the icon.

.IconColor("blue")

IconHtml¶

The custom HTML content for an icon.

.IconHtml("؟")

Animation¶

If set to false, the popup animation will be disabled. Default true

.Animation(false)

ShowClass¶

CSS classes for animations when showing a popup (fade in).

.ShowClass(sc => sc
    .Popup("swal2-show")
    .Backdrop("swal2-backdrop-show")
    .Icon("swal2-icon-show"))

HideClass¶

CSS classes for animations when hiding a popup (fade out).

.ShowClass(sc => sc
    .Popup("swal2-hide")
    .Backdrop("swal2-backdrop-hide")
    .Icon("swal2-icon-hide"))

The footer of the popup. Can be either plain text or HTML.

.Footer("footer text")

Backdrop¶

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

.Backdrop(false)

Can be either a boolean or a string which will be assigned to the CSS background property.

.Backdrop("no-repeat")

Toast¶

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 autofocused. Default false

.Toast(true)

Target¶

The container element for adding popup into. Default 'body'

.Target("body")

Input¶

Input field type.

.Input(SwalInput.Email)

Width¶

Popup window width, including paddings (box-sizing: border-box). Can be in any CSS unit (px, em/rem, %). Default '32em'

.Width("5px")

Padding¶

Popup window padding. Can be in any CSS unit (px, em/rem, %). Default '0 0 1.25em'

.Padding("3em")

Color¶

Color for title, content and footer (CSS color property). The default color is '#545454'.

.Color("#545454")

Background¶

Popup window background (CSS background property). The default background is '#fff'.

.Background("#fff")

Position¶

Popup window position. Default 'center'

.Position(SwalPosition.Top)

Grow¶

Paired with window position, sets the direction the popup should grow in, can be set to false.

.Grow(true)

Or, can be set to 'row', 'column', 'fullscreen'.

.Grow("row")

Timer¶

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

.Timer(1000)

TimerProgressBar¶

If set to true, the timer will have a progress bar at the bottom of a popup. Mostly, this feature is useful with toasts. Default false

.TimerProgressBar(true)

HeightAuto¶

By default, SweetAlert2 sets html's and body's CSS height to auto !important. If this behavior isn't compatible with your project's layout, set heightAuto to false. Default true

.HeightAuto(false)

AllowOutsideClick¶

If set to false, the user can't dismiss the popup by clicking outside it. You can also pass a custom function returning a boolean value, e.g. if you want to disable outside clicks for the loading state of a popup. Default true

.AllowOutsideClick(false)

AllowEscapeKey¶

If set to false, the user can't dismiss the popup by pressing the Esc key. You can also pass a custom function returning a boolean value, e.g. if you want to disable the Esc key for the loading state of a popup. Default true

.AllowEscapeKey(false)

StopKeydownPropagation¶

If set to false, SweetAlert2 will allow keydown events propagation to the document. Default true

.StopKeydownPropagation(false)

KeydownListenerCapture¶

Useful for those who are using SweetAlert2 along with Bootstrap modals. By default keydownListenerCapture is false which means when a user hits Esc, both SweetAlert2 and Bootstrap modals will be closed. Set keydownListenerCapture to true to fix that behavior. Default false

.KeydownListenerCapture(true)

LoaderHtml¶

Use this to change the HTML content of the loader.

.LoaderHtml("<div class="custom-loader">Loading...</div>")

ShowLoaderOnConfirm¶

Set to true to disable buttons and show the loader instead of the Confirm button. Use it in combination with the preConfirm parameter. Default false

.ShowLoaderOnConfirm(true)

ShowLoaderOnDeny¶

Set to true to disable buttons and show the loader instead of the Deny button. Use it in combination with the preDeny parameter. Default false

.ShowLoaderOnDeny(true)

ReturnInputValueOnDeny¶

If you want to return the input value as result.value when denying the popup, set to true. Otherwise, the denying will set result.value to false. Default false

.ReturnInputValueOnDeny(true)

ImageUrl¶

Add a customized icon for the popup. Should contain a string with the path or URL to the image.

.ImageUrl("https://unsplash.it/400/200")

ImageWidth¶

If imageUrl is set, you can specify imageWidth to describes image width. Can be in any CSS unit (px, em/rem, %).

.ImageWidth("32px")

ImageHeight¶

Custom image height. Can be in any CSS unit (px, em/rem, %).

.ImageHeight("32px")

ImageAlt¶

An alternative text for the custom image icon.

.ImageAlt("image alt text")

InputLabel¶

Input field label.

.InputLabel("Your IP address")

InputPlaceholder¶

Input field placeholder.

.InputPlaceholder("password")

InputValue¶

Input field initial value. If the input type is select, inputValue will represent the selected <option> tag. If the input type is checkbox, inputValue will represent the checked state. If the input type is email, number, tel, text, email, number, tel or textarea, a Promise can be accepted as inputValue.

.InputValue("value")

InputOptions¶

If input parameter is set to select or radio, you can provide options. Can be a Map or a plain object, with keys that represent option values and values that represent option text. You can also provide plain object or Map as values that will represented a group of options, being the label of this <optgroup> the key. Finally, you can also provide a Promise that resolves with one of those types.

.InputOptions(Viewbag.MyOptions)

InputAutoFocus¶

Automatically focus the input when popup is shown. Set this parameter to false to disable auto-focusing. Default true

.InputAutoFocus(false)

InputAutoTrim¶

Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming. Default true

.InputAutoTrim(false)

InputAttributes¶

HTML input attributes (e.g. min, max, autocomplete, accept), that are added to the input field. Object keys will represent attributes names, object values will represent attributes values.

.InputAttributes(ia => ia
    .Add("maxlength", "10")
    .Add("autocapitalize", "off")
    .Add("autocorrect", "off"))

ValidationMessage¶

A custom validation message for default validators (email, url).

.ValidationMessage("Custom validation message!")

ProgressSteps¶

Progress steps, useful for queues.

.ProgressSteps("1", "2", "3")

CurrentProgressStep¶

Current active progress step.

.CurrentProgressStep("1")

ProgressStepsDistance¶

Distance between progress steps. Can be in any CSS unit (px, em/rem, %).

.ProgressStepsDistance("1em")