« Changelog History


sweetalert2 v10.0.0 Release Notes

Release Date: 2020-09-07 // over 3 years ago

  • 🍱 🔴 Breaking change

    For the sake of customization, the loader has been separated from the confirm button into its own DOM element (<div class="swal2-loader"></div>).

    As a part of that breaking change, there's a new API param loaderHtml which allow to set custom HTML, e.g. SVG icon inside of the loader.

    🍱 🎉 NEW FEATURES

    🍱 🎉 The third DENY button

    image

    Swal.fire({title: 'Do you want to save the changes?',showDenyButton: true,showCancelButton: true,confirmButtonText: `Save`,denyButtonText: `Don't save`,}).then(function (result) {console.log(result)// Object {// value: false,// isConfirmed: false,// isDenied: true,// isDismissed: false// }})Swal.clickDeny()

    These API params for the DENY button were added:

    • 0️⃣ showDenyButton?: boolean; (default false)
    • 0️⃣ denyButtonText?: string; (default 'No')
    • 0️⃣ denyButtonColor?: string; (default undefined)
    • 0️⃣ denyButtonAriaLabel?: string; (default '')
    • 0️⃣ focusDeny?: boolean; (default false)
    • 0️⃣ customClass.denyButton?: string (default undefined)

    These API methods for the DENY button were added:

    • Swal.getDenyButton()
    • Swal.clickDeny()

    🍱 🎉 New SCSS variables

    // ACTIONS$swal2-actions-padding: 0 1.6em !default;// DENY BUTTON$swal2-deny-button-order: null !default;$swal2-deny-button-border: 0 !default;$swal2-deny-button-border-radius: .25em !default;$swal2-deny-button-background-color: #dd6b55 !default;$swal2-deny-button-color: $swal2-white !default;$swal2-deny-button-font-size: 1.0625em !default;// LOADER$swal2-loader-align-items: center !default;$swal2-loader-justify-content: center !default;$swal2-loader-width: 2.2em !default;$swal2-loader-height: 2.2em !default;$swal2-loader-margin: 0 1.875em !default;$swal2-loader-animation: swal2-rotate-loading 1.5s linear 0s infinite normal !default;$swal2-loader-border-width: .25em !default;$swal2-loader-border-style: solid !default;$swal2-loader-border-radius: 100% !default;$swal2-loader-border-color: #3085d6 transparent #3085d6 transparent !default;// CONFIRM BUTTON$swal2-confirm-button-order: null !default;// CANCEL BUTTON$swal2-cancel-button-order: null !default;