Alert
Tailwind CSS and Alpine JS Alert
Alerts allow you to communicate important information to users and offer feedback on their actions.
Default Alert
An alert with an icon, title, and message allows you to inform users about critical updates or changes in the system. You can toggle the icon on or off.
Update Available
A new version is available. Please update to the latest version.
Successfully Subscribed
Success! You've subscribed to our newsletter. Welcome aboard!
Credit Card Expires Soon
Your credit card expires soon. Please update your payment information.
Invalid Email Address
The email address you entered is invalid. Please try again.
HTML
<!-- info Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Update Available</h3>
<p class="">A new version is available. Please update to the latest version.</p>
</div>
<button class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- success Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Successfully Subscribed</h3>
<p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
</div>
<button class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- warning Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Credit Card Expires Soon</h3>
<p class="">Your credit card expires soon. Please update your payment information.</p>
</div>
<button class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- danger Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Invalid Email Address</h3>
<p class="">The email address you entered is invalid. Please try again.</p>
</div>
<button class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
Alert with List
An alert with a list of items allows you to notify users about items that require their attention. You can toggle the icon on or off.
Password is not strong
The password you entered does not meet the requirements. Make sure your password:
- has minimum 8 characters
- includes both upper and lower case
- contains at least one number
Password Requirements
In order to keep your account secure, make sure your password:
- has minimum 8 characters
- includes both upper and lower case
- contains at least one number
HTML
<!-- danger Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Password is not strong</h3>
<p class="">The password you entered does not meet the requirements. Make sure your password:</p>
<ul class="">
<li>has <strong>minimum 8</strong> characters</li>
<li>includes <strong>both upper and lower </strong> cases</li>
<li>contains <strong>at least one number</strong></li>
</ul>
</div>
</div>
</div>
<!-- info Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Password Requirements</h3>
<p class="">In order to keep your account secure, make sure your password:</p>
<ul class="">
<li>has <strong>minimum 8</strong> characters</li>
<li>includes <strong>both upper and lower </strong> cases</li>
<li>contains <strong>at least one number</strong></li>
</ul>
</div>
</div>
</div>
Alert with Link
An alert with a link allows you to direct users to a specific page or section of your website.
Update Available
A new version is available. Please update to the latest version.
Successfully Subscribed
Success! You've subscribed to our newsletter. Welcome aboard!
Credit Card Expires Soon
Your credit card expires soon. Please update your payment information.
Invalid Email Address
The email address you entered is invalid. Please try again.
HTML
<!-- info Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Update Available</h3>
<p class="">A new version is available. Please update to the latest version.</p>
</div>
<a href="#" class="">
Details
</a>
</div>
</div>
</div>
<!-- success Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Successfully Subscribed</h3>
<p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
</div>
<a href="#" class="">
Details
</a>
</div>
</div>
</div>
<!-- warning Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Credit Card Expires Soon</h3>
<p class="">Your credit card expires soon. Please update your payment information.</p>
</div>
<a href="#" class="">
Details
</a>
</div>
</div>
</div>
<!-- danger Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Invalid Email Address</h3>
<p class="">The email address you entered is invalid. Please try again.</p>
</div>
<a href="#" class="">
Details
</a>
</div>
</div>
</div>
Alert with Action
An alert with action buttons allows you to provide users with a quick way to take action.
Update Available
A new version is available. Please update to the latest version.
Successfully Subscribed
Success! You've subscribed to our newsletter. Welcome aboard!
Credit Card Expires Soon
Your credit card expires soon. Please update your payment information.
Invalid Email Address
The email address you entered is invalid. Please try again.
HTML
<!-- info Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Update Available</h3>
<p class="">A new version is available. Please update to the latest version.</p>
</div>
<div class="">
<button type="button" class="">
Update Now
</button>
<button type="button" class="">
Dismiss
</button>
</div>
</div>
</div>
</div>
<!-- success Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Successfully Subscribed</h3>
<p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
</div>
<div class="">
<button type="button" class="">
Dashboard
</button>
<button type="button" class="">
Dismiss
</button>
</div>
</div>
</div>
</div>
<!-- warning Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Credit Card Expires Soon</h3>
<p class="">Your credit card expires soon. Please update your payment information.</p>
</div>
<div class="">
<button type="button" class="">
Update Now
</button>
<button type="button" class="">
Dismiss
</button>
</div>
</div>
</div>
</div>
<!-- danger Alert -->
<div class="" role="alert">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<div>
<h3 class="">Invalid Email Address</h3>
<p class="">The email address you entered is invalid. Please try again.</p>
</div>
<div class="">
<button type="button" class="">
Try Again
</button>
<button type="button" class="">
Dismiss
</button>
</div>
</div>
</div>
</div>
Alert Dismiss Functionality
Requires Alpine JS
An alert with dismiss functionality implemented using Alpine JS.
Update Available
A new version is available. Please update to the latest version.
Successfully Subscribed
Success! You've subscribed to our newsletter. Welcome aboard!
Credit Card Expires Soon
Your credit card expires soon. Please update your payment information.
Invalid Email Address
The email address you entered is invalid. Please try again.
HTML
<!-- info Alert -->
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible" class="" role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Update Available</h3>
<p class="">A new version is available. Please update to the latest version.</p>
</div>
<button type="button" @click="alertIsVisible = false" class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- success Alert -->
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible" class="" role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Successfully Subscribed</h3>
<p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
</div>
<button type="button" @click="alertIsVisible = false" class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- warning Alert -->
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible" class="" role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Credit Card Expires Soon</h3>
<p class="">Your credit card expires soon. Please update your payment information.</p>
</div>
<button type="button" @click="alertIsVisible = false" class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
<!-- danger Alert -->
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible" class="" role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
<div class="">
<div class="" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
</svg>
</div>
<div class="">
<h3 class="">Invalid Email Address</h3>
<p class="">The email address you entered is invalid. Please try again.</p>
</div>
<button type="button" @click="alertIsVisible = false" class="" aria-label="dismiss alert">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
Data
List of all Alpine JS data used in this component.
| Property | Description |
|---|---|
| alertIsVisible |
Boolean - Alert is visible on the page |
Keyboard Navigation
| Key | Action |
|---|---|
| Tab |
Next focusable element gets the focus |
| Enter | Focused item gets selected |