Feedback components for displaying important messages and status indicators.
This is an informational alert message.
Your changes have been saved successfully.
Please review your information before proceeding.
An error occurred while processing your request.
<div class="alert alert-info">
<div class="alert-content">
<div class="alert-title">Title</div>
<p class="alert-description">Message</p>
</div>
</div>
A simple info alert without a title.
Operation completed successfully!
<w-alert type="info" title="Information">
Alert message here
</w-alert>
<w-alert type="success">
Alert without title
</w-alert>
Click the X to dismiss this alert.
This warning can be dismissed.
<div class="alert alert-info alert-dismissible">...
<button class="alert-close" onclick="this.parentElement.remove()">X</button>
</div>
Small alert with compact padding.
Default size alert.
Large alert with more padding.
<div class="alert alert-info alert-sm">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-info alert-lg">...</div>
Callouts are similar to alerts but with a left border accent.
This is a default callout with neutral styling.
This callout provides additional information.
Here's a helpful tip for your workflow.
Be careful when performing this action.
This action cannot be undone!
<div class="callout callout-info">
<div class="callout-title">Info</div>
<p>Callout content</p>
</div>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-solid-success">Solid</span>
<span class="badge badge-outline-danger">Outline</span>
<w-badge type="primary">Primary</w-badge>
<w-badge type="solid-success">Solid Success</w-badge>
<span class="badge badge-primary badge-sm">Small</span>
<span class="badge badge-primary">Default</span>
<span class="badge badge-primary badge-lg">Large</span>
<span class="badge badge-primary">Pill</span>
<span class="badge badge-primary badge-rounded">Rounded</span>
<span class="badge badge-dot badge-dot-success"></span>
| Class | Description |
|---|---|
alert | Base alert container |
alert-info | Info/blue styling |
alert-success | Success/green styling |
alert-warning | Warning/yellow styling |
alert-danger | Danger/red styling |
alert-dismissible | Adds space for close button |
alert-sm | Small size |
alert-lg | Large size |
alert-title | Alert title styling |
alert-description | Alert message styling |
alert-close | Close button styling |
| Class | Description |
|---|---|
badge | Base badge |
badge-primary/secondary/etc | Soft color variants |
badge-solid-* | Solid background variants |
badge-outline-* | Border-only variants |
badge-sm | Small size |
badge-lg | Large size |
badge-rounded | Rounded corners instead of pill |
badge-dot | Status dot indicator |