Sweet Alert

Sweet Alert

Sweet Alert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below. Please read the official plugin documentation for a full list of options.

<button 
  class="btn btn-primary" 
  data-toggle="swal" 
  data-swal-title="Here's a message!">
  Basic
</button>
Title & Subtitle

<button 
  class="btn btn-primary" 
  data-toggle="swal" 
  data-swal-title="Here's a message!"
  data-swal-text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam tenetur unde odio nam reiciendis cum maiores dicta vel officiis aliquid nesciunt enim incidunt ab qui, at quis beatae illum, error.">
  Title &amp; Subtitle
</button>
Success

<button 
  class="btn btn-success" 
  data-toggle="swal" 
  data-swal-title="Good job!"
  data-swal-text="You clicked the button!"
  data-swal-type="success">
  Success
</button>
Confirm

A warning message, with a function attached to the confirm button.

<button 
  class="btn btn-warning" 
  data-toggle="swal" 
  data-swal-title="Are you sure?"
  data-swal-text="You will not be able to recover this imaginary file!"
  data-swal-type="warning"
  data-swal-show-cancel-button="true"
  data-swal-confirm-button-text="Yes, delete it!"
  data-swal-confirm-cb="#swal-confirm-delete"
  data-swal-close-on-confirm="false">
  Confirm
</button>

<div 
  id="swal-confirm-delete" 
  class="d-none"
  data-swal-type="success"
  data-swal-title="Deleted!"
  data-swal-text="Your imaginary file has been deleted.">
</div>
Confirm and Cancel

And by passing a parameter, you can execute something else for Cancel.

<button 
  class="btn btn-danger" 
  data-toggle="swal" 
  data-swal-title="Are you sure?"
  data-swal-text="You will not be able to recover this imaginary file!"
  data-swal-type="warning"
  data-swal-confirm-button-text="Yes, delete it!"
  data-swal-confirm-cb="#swal-confirm-delete"
  data-swal-show-cancel-button="true"
  data-swal-cancel-button-text="No, cancel please!"
  data-swal-cancel-cb="#swal-cancel-delete"
  data-swal-close-on-confirm="false"
  data-swal-close-on-cancel="false">
  Confirm and Cancel
</button>

<div 
  id="swal-cancel-delete" 
  class="d-none"
  data-swal-type="error"
  data-swal-title="Cancelled"
  data-swal-text="Your imaginary file is safe :)">
</div>

Luma Luma

Luma is a beautifully crafted user interface for modern Education Platforms, including Courses & Tutorials, Video Lessons, Student and Teacher Dashboard, Curriculum Management, Earnings and Reporting, ERP, HR, CMS, Tasks, Projects, eCommerce and more.

Terms Privacy policy

Copyright 2019 © All rights reserved.