Alert

Pages

Users

Al Pacino

alpacino@left4code.com

Sylvester Stallone

sylvesterstallone@left4code.com

Nicolas Cage

nicolascage@left4code.com

Russell Crowe

russellcrowe@left4code.com

Products

Basic Alerts

Show example code

Awesome simple alert

  HTMLOpenTagdiv class="alert alert-primary show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-pending show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark show mb-2" role="alert"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag

Icon Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-primary show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-pending show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag

Additional Content Alerts

Show example code

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  HTMLOpenTagdiv class="alert alert-primary show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-slate-700 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-slate-500 px-1 rounded-md text-white ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-slate-700 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-slate-700 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-pending show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-slate-700 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-slate-700 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark show mb-2" role="alert"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-slate-500 px-1 rounded-md text-white ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Icon & Dismiss Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-primary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close text-white" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-pending alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close text-white" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close text-white" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Outline Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-outline-primary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-secondary alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-success alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-warning alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-pending alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-danger alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-outline-dark alert-dismissible show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagbutton type="button" class="btn-close" data-tw-dismiss="alert" aria-label="Close"HTMLCloseTag HTMLOpenTagi data-lucide="x" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Soft Color Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="alert alert-primary-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-secondary-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-success-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-warning-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-pending-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-danger-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="alert alert-dark-soft show flex items-center mb-2" role="alert"HTMLCloseTag HTMLOpenTagi data-lucide="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag

Methods

Get or Create Instance

Static method which allows you to get the alert instance associated with a DOM element, or create a new one in case it wasn’t initialized.

  const myAlert = tailwind.Alert.getOrCreateInstance(document.querySelector("#myAlert"));

Get Instance

Static method which allows you to get the alert instance associated with a DOM element.

  const myAlert = tailwind.Alert.getInstance(document.querySelector("#myAlert"));

Hide

Manually hides an alert. Returns to the caller before the alert has actually been hidden (i.e. before the hidden.tw.alert event occurs).

  myAlert.hide();

Show

Manually opens an alert. Returns to the caller before the alert has actually been shown (i.e. before the shown.tw.alert event occurs).

  myAlert.show();

Toggle

Manually toggles an alert. Returns to the caller before the alert has actually been shown or hidden (i.e. before the shown.tw.alert or hidden.tw.alert event occurs).

  myAlert.toggle();

Events

Midone’s alert class exposes a few events for hooking into alert functionality. All alert events are fired at the alert itself (i.e. at the <div class="alert">).

Event type	Description
show.tw.alert	This event fires immediately when the show instance method is called.
hide.tw.alert	This event is fired immediately when the hide instance method has been called.

  const myAlertEl = document.getElementById('myAlert') myAlertEl.addEventListener('hidden.tw.alert', function (event) { // do something... })