Logo Logo

Documentation v1.0.0

Preview
Light
Dark
System

Overview

SweetAlert is a beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. For more info please visit the plugin's Website or Github Repo.

Usage

SweetAlert's Javascript bundles are globally included in all pages. 
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>

Initialization

  • SweetAlert is initialized via Javascript only by adding Swal.fire() at any point to trigger it.
  • There are a variety of configuration options within SweetAlert. Please refer to the official documentation for more info.

Basic

Here's a basic example of SweetAlert. 
const button = document.getElementById('kt_docs_sweetalert_basic');

button.addEventListener('click', e =>{
    e.preventDefault();

    Swal.fire({
        text: "Here's a basic example of SweetAlert!",
        icon: "success",
        buttonsStyling: false,
        confirmButtonText: "Ok, got it!",
        customClass: {
            confirmButton: "btn btn-primary"
        }
    });
});
<button type="button" id="kt_docs_sweetalert_basic" class="btn btn-primary">Toggle SweetAlert</button>

HTML

Here's an example of SweetAlert with HTML content. 
const button = document.getElementById('kt_docs_sweetalert_html');

button.addEventListener('click', e =>{
    e.preventDefault();

    Swal.fire({
        html: `A SweetAlert content with <strong>bold text</strong>, <a href="#">links</a>
             or any of our available <span class="badge badge-primary">components</span>`,
        icon: "info",
        buttonsStyling: false,
        showCancelButton: true,
        confirmButtonText: "Ok, got it!",
        cancelButtonText: 'Nope, cancel it',
        customClass: {
            confirmButton: "btn btn-primary",
            cancelButton: 'btn btn-danger'
        }
    });
});
<button type="button" id="kt_docs_sweetalert_html" class="btn btn-primary">Toggle HTML SweetAlert</button>

All States

Here are examples for each of SweetAlert's states. 
const button = document.getElementById('kt_docs_sweetalert_basic');

button.addEventListener('click', e =>{
    e.preventDefault();

    Swal.fire({
        text: "Here's a basic example of SweetAlert!",
        icon: "success",
        buttonsStyling: false,
        confirmButtonText: "Ok, got it!",
        customClass: {
            confirmButton: "btn btn-primary"
        }
    });
});
<button type="button" id="kt_docs_sweetalert_state_info" class="btn btn-info">Toggle Info</button>
<button type="button" id="kt_docs_sweetalert_state_warning" class="btn btn-warning">Toggle Warning</button>
<button type="button" id="kt_docs_sweetalert_state_error" class="btn btn-danger">Toggle Error</button>
<button type="button" id="kt_docs_sweetalert_state_success" class="btn btn-success">Toggle Success</button>
<button type="button" id="kt_docs_sweetalert_state_question" class="btn btn-primary">Toggle Question</button>
try metronic buy mega bundle
Preview Get Help Buy Now