Rubick
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Johnny Depp
johnnydepp@left4code.com
Al Pacino
alpacino@left4code.com
Denzel Washington
denzelwashington@left4code.com
Leonardo DiCaprio
leonardodicaprio@left4code.com
Products
Nike Air Max 270
Sport & Outdoor
Sony Master Series A9G
Electronic
Samsung Q90 QLED TV
Electronic
Nikon Z6
Photography

## Alert

## Basic Alerts

Show example code
Awesome simple alert
Awesome simple alert
Awesome simple alert
Awesome simple alert
Awesome simple alert
Awesome simple alert
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
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
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
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
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
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
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
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
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... })

Dark Mode