Alert
Displays a callout for important information, feedback, or actions.
Default
A basic alert using the default styling.
html
Heads up!
You can add components to your app using the CLI.
<div class="vt-alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
</svg>
<div>
<h3 class="vt-text-sm vt-font-semibold">Heads up!</h3>
<p class="vt-text-sm vt-mt-1">You can add components to your app using the CLI.</p>
</div>
</div>Variants
Alerts using semantic colors for different contexts.
html
Information
A new software update is available. See what's new in version 3.0.
Success
Your payment has been processed successfully.
Warning
Your free trial expires in 3 days. Upgrade your plan to continue.
Error
There was a problem with your request. Please try again.
<div class="vt-alert vt-alert-info">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
</svg>
<div>
<h3 class="vt-text-sm vt-font-semibold">Information</h3>
<p class="vt-text-sm vt-mt-1">A new software update is available. See what's new in version 3.0.</p>
</div>
</div>
<div class="vt-alert vt-alert-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-check vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path>
</svg>
<div>
<h3 class="vt-text-sm vt-font-semibold">Success</h3>
<p class="vt-text-sm vt-mt-1">Your payment has been processed successfully.</p>
</div>
</div>
<div class="vt-alert vt-alert-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-triangle-alert vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>
</svg>
<div>
<h3 class="vt-text-sm vt-font-semibold">Warning</h3>
<p class="vt-text-sm vt-mt-1">Your free trial expires in 3 days. Upgrade your plan to continue.</p>
</div>
</div>
<div class="vt-alert vt-alert-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-alert vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line>
</svg>
<div>
<h3 class="vt-text-sm vt-font-semibold">Error</h3>
<p class="vt-text-sm vt-mt-1">There was a problem with your request. Please try again.</p>
</div>
</div>With Description
Alerts with extended descriptions providing more context.
html
Security Update Required
A critical security update is available for your account. Two-factor authentication has been reset due to a recent security incident. Please re-enable it to secure your account.
Sync in Progress
Your data is being synchronized across all devices. This may take a few minutes depending on the amount of data. You can continue working while the sync completes in the background.
<div class="vt-alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-shield-check vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path>
</svg>
<div>
<h3 class="vt-text-sm vt-font-semibold">Security Update Required</h3>
<p class="vt-text-sm vt-mt-1">A critical security update is available for your account. Two-factor authentication has been reset due to a recent security incident. Please re-enable it to secure your account.</p>
</div>
</div>
<div class="vt-alert vt-alert-info">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-refresh-cw vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path>
</svg>
<div>
<h3 class="vt-text-sm vt-font-semibold">Sync in Progress</h3>
<p class="vt-text-sm vt-mt-1">Your data is being synchronized across all devices. This may take a few minutes depending on the amount of data. You can continue working while the sync completes in the background.</p>
</div>
</div>With Action Button
Alerts that include an actionable button.
html
Update Available
A new version of the application is ready to install.
Deployment Successful
Your project has been deployed to production.
Payment Failed
Your payment method was declined. Please update your billing information.
<div class="vt-alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-download vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path>
</svg>
<div class="vt-flex-1">
<h3 class="vt-text-sm vt-font-semibold">Update Available</h3>
<p class="vt-text-sm vt-mt-1">A new version of the application is ready to install.</p>
<button class="vt-mt-3 vt-inline-flex vt-items-center vt-justify-center vt-rounded-lg vt-text-xs vt-font-medium vt-h-7 vt-px-3 vt-bg-info-fill vt-text-generic-white vt-hover:opacity-90 vt-transition-opacity">Update Now</button>
</div>
</div>
<div class="vt-alert vt-alert-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-check vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path>
</svg>
<div class="vt-flex-1">
<h3 class="vt-text-sm vt-font-semibold">Deployment Successful</h3>
<p class="vt-text-sm vt-mt-1">Your project has been deployed to production.</p>
<button class="vt-mt-3 vt-inline-flex vt-items-center vt-justify-center vt-rounded-lg vt-text-xs vt-font-medium vt-h-7 vt-px-3 vt-border vt-border-current vt-opacity-80 vt-hover:opacity-100 vt-transition-opacity">View Deployment</button>
</div>
</div>
<div class="vt-alert vt-alert-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-alert vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line>
</svg>
<div class="vt-flex-1">
<h3 class="vt-text-sm vt-font-semibold">Payment Failed</h3>
<p class="vt-text-sm vt-mt-1">Your payment method was declined. Please update your billing information.</p>
<button class="vt-mt-3 vt-inline-flex vt-items-center vt-justify-center vt-rounded-lg vt-text-xs vt-font-medium vt-h-7 vt-px-3 vt-border vt-border-current vt-opacity-80 vt-hover:opacity-100 vt-transition-opacity">Update Billing</button>
</div>
</div>Closable
Alerts with a close button to dismiss them.
html
Tip
You can pin frequently used pages for faster access.
New Feature
Dark mode is now available! Toggle it from the settings page.
Storage Almost Full
You are using 90% of your storage. Consider upgrading your plan.
Connection Lost
Unable to connect to the server. Check your internet connection and try again.
<div id="alert-close-1" class="vt-alert vt-transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
</svg>
<div class="vt-flex-1">
<h3 class="vt-text-sm vt-font-semibold">Tip</h3>
<p class="vt-text-sm vt-mt-1">You can pin frequently used pages for faster access.</p>
</div>
<button onclick="document.getElementById('alert-close-1').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:bg-surface-subtle vt-transition-colors vt--mt-1 vt--mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div id="alert-close-2" class="vt-alert vt-alert-info vt-transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-info vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path>
</svg>
<div class="vt-flex-1">
<h3 class="vt-text-sm vt-font-semibold">New Feature</h3>
<p class="vt-text-sm vt-mt-1">Dark mode is now available! Toggle it from the settings page.</p>
</div>
<button onclick="document.getElementById('alert-close-2').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:opacity-70 vt-transition-opacity vt--mt-1 vt--mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div id="alert-close-3" class="vt-alert vt-alert-warning vt-transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-triangle-alert vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path>
</svg>
<div class="vt-flex-1">
<h3 class="vt-text-sm vt-font-semibold">Storage Almost Full</h3>
<p class="vt-text-sm vt-mt-1">You are using 90% of your storage. Consider upgrading your plan.</p>
</div>
<button onclick="document.getElementById('alert-close-3').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:opacity-70 vt-transition-opacity vt--mt-1 vt--mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div id="alert-close-4" class="vt-alert vt-alert-danger vt-transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-circle-alert vt-w-5 vt-h-5 vt-shrink-0 vt-mt-0.5">
<circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line>
</svg>
<div class="vt-flex-1">
<h3 class="vt-text-sm vt-font-semibold">Connection Lost</h3>
<p class="vt-text-sm vt-mt-1">Unable to connect to the server. Check your internet connection and try again.</p>
</div>
<button onclick="document.getElementById('alert-close-4').style.display='none'" class="vt-shrink-0 vt-p-1 vt-rounded-lg vt-hover:opacity-70 vt-transition-opacity vt--mt-1 vt--mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-4 vt-h-4">
<path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
</svg>
</button>
</div>Guidelines
Inline contextual message inside the content flow (form warnings, section notices). NOT app-wide → banner; NOT transient after an action → toast.
Heads up
Your changes apply to all team members.
Do
Error
There was a problem with your request.
Do
Warning
Your trial expires soon.
Error
Payment failed.
Info
A new update is available.
Don't
Saved!
Your changes were saved.
Don't
API Reference
All CSS classes available for the Alert component.
| Class | Type | Description |
|---|---|---|
vt-alert |
Base | Base alert container — flex layout with gap, rounded, border, padding |
vt-alert-info |
Variant | Blue tinted background and border for informational alerts |
vt-alert-success |
Variant | Green tinted background and border for success alerts |
vt-alert-warning |
Variant | Orange tinted background and border for warning alerts |
vt-alert-danger |
Variant | Red tinted background and border for error alerts |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Role | Use role="alert" for urgent messages that need immediate attention |
| Closable | Close button should have aria-label="Dismiss" for screen readers |
| Icons | Decorative icons should have aria-hidden="true", meaning conveyed by text |
| Focus | When alert appears dynamically, use aria-live="polite" for non-urgent updates |