W3CoreUI

SweetAlert.

SweetAlert is a beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Click here

Basic Sweetalert2

A basic message modal.


<button class="btn btn-primary btn-sweet-basic" aria-label="Try me! Example: A basic message">Try me!</button>

Sweetalert with Icons

Modal with Success, Error, Warning, Info and Question icon.


<button class="btn btn-success btn-sweet-success" aria-label="Try me! Example: Success Modal">Success</button>
<button class="btn btn-danger btn-sweet-error" aria-label="Try me! Example: Error Modal">Error</button>
<button class="btn btn-warning btn-sweet-warning" aria-label="Try me! Example: Warning Modal">Warning</button>
<button class="btn btn-info btn-sweet-info" aria-label="Try me! Example: Info Modal">Info</button>
<button class="btn btn-dark btn-sweet-question" aria-label="Try me! Example: Question Modal">Question</button>

Text Under

A title with a text under


<button class="btn btn-primary btn-sweet-text" aria-label="Try me! Example: A title with a text under">Try me!</button>

With Footer

A modal with a title, an error icon, a text, and a footer.


<button class="btn btn-danger btn-sweet-footer" aria-label="Try me! Example: A modal with a title, an error icon, a text, and a footer">Try me!</button>

Custom & Image Modal

A modal window with a long content inside and custom image.


<button class="btn btn-secondary btn-sweet-tall" aria-label="Try me! Example: A modal window with a long content inside">Long content</button>
<button class="btn btn-primary btn-sweet-image" aria-label="Try me! Example: A message with auto close timer">Custom Image</button>

Draggable Modal

A draggable modal window.


<button class="btn btn-success btn-sweet-draggable" aria-label="Try me! Example: A draggable modal window">Try me!</button>

Custom Modal

Custom HTML description and buttons with ARIA labels.


<button class="btn btn-primary btn-sweet-custom" aria-label="Try me! Example: Custom HTML description and buttons">Try me!</button>

Dialog with three buttons

A dialog with three buttons.


<button class="btn btn-primary btn-sweet-dialog" aria-label="Try me! Example: A dialog with three buttons">Try me!</button>

Custom positioned

Use text utilities as needed to change the alignment of your blockquote.


<button class="btn btn-primary btn-sweet-position" aria-label="Try me! Example: A custom positioned dialog">Try me!</button>

Modal backdrop

A message with custom width, padding, background and animated Nyan Cat.

Auto Close Timer

A message with auto close timer.


<button class="btn btn-primary btn-sweet-timer" aria-label="Try me! Example: A message with auto close timer">Try me!</button>

RTL Modal

Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages.


<button class="btn btn-primary btn-sweet-rtl" aria-label="Try me! Example: A message in Arabic">Try me!</button>

AJAX Modal

AJAX request example.


<button class="btn btn-primary btn-sweet-ajax" aria-label="Try me! Example: AJAX request">Try me!</button>

Modal Mixin

Mixin example.


<button class="btn btn-primary btn-sweet-mixin" aria-label="Try me! Example: mixin">Try me!</button>