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 .
 
									
									
									
										
										
										 
										
										
										SweetAlert's Javascript bundles are globally included in all pages.
										
										
										
											
											
												copy 
												
													
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										
											
												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. 
											 
										 
										
									 
									
									
									
										
										
										 
										
										
										Here's a basic example of SweetAlert.
										
										
										
										
										
										
											
											
												copy 
												
												
													
														
															
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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Here's an example of SweetAlert with HTML content.
										
										
										
										
										
										
											
											
												copy 
												
												
													
														
															
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>
 
														 
													 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Here are examples for each of SweetAlert's states.
										
										
										
											
												Toggle Info 
												Toggle Warning 
												Toggle Error 
												Toggle Success 
												Toggle Question 
											
										 
										
										
										
											
											
												copy 
												
												
													
														
															
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>