Alert
Inline messages for information, success, warnings and errors, with optional actions and dismiss.
Colours
A new version is available
MIAN 1.1 adds six more noodles.
Payment received
Your invoice has been paid in full.
Your trial ends in 3 days
Add a payment method to keep your projects.
Deployment failed
Build exited with code 1. Check the logs.
<div class="mn-stack" style="max-width:36rem">
<div class="mn-alert"><span class="mn-alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8v.01"/></svg></span><p class="mn-alert-title">A new version is available</p><p class="mn-alert-desc">MIAN 1.1 adds six more noodles.</p></div>
<div class="mn-alert mn-success"><span class="mn-alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></span><p class="mn-alert-title">Payment received</p><p class="mn-alert-desc">Your invoice has been paid in full.</p></div>
<div class="mn-alert mn-warning"><span class="mn-alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 2 20h20L12 3Z"/><path d="M12 10v4M12 17v.01"/></svg></span><p class="mn-alert-title">Your trial ends in 3 days</p><p class="mn-alert-desc">Add a payment method to keep your projects.</p></div>
<div class="mn-alert mn-danger" role="alert"><span class="mn-alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg></span><p class="mn-alert-title">Deployment failed</p><p class="mn-alert-desc">Build exited with code 1. Check the logs.</p></div>
</div>With actions
Try the Udon noodle
Softer corners, warmer colours, roomier controls.
<div class="mn-alert mn-neutral" style="max-width:36rem">
<span class="mn-alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2"/></svg></span>
<p class="mn-alert-title">Try the Udon noodle</p>
<p class="mn-alert-desc">Softer corners, warmer colours, roomier controls.</p>
<div class="mn-alert-actions"><button class="mn-btn mn-btn-sm" data-mn-set-noodle="udon">Apply</button><button class="mn-btn mn-btn-sm mn-btn-ghost mn-btn-icon" data-mn-dismiss aria-label="Dismiss"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
</div>Solid
Heads up
Scheduled maintenance tonight from 02:00 to 03:00 UTC.
<div class="mn-alert mn-alert-solid mn-primary" style="max-width:36rem"><p class="mn-alert-title">Heads up</p><p class="mn-alert-desc">Scheduled maintenance tonight from 02:00 to 03:00 UTC.</p></div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/alert.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-alert | Soft alert, info by default. Add a colour role. |
| mn-alert-solid · mn-alert-neutral | Variants. |
| mn-alert-icon · mn-alert-title · mn-alert-desc · mn-alert-actions | Parts. |
| [data-mn-dismiss] | A button that removes the alert (emits cancelable mn:dismiss). |
Accessibility
- Static alerts are plain content. For messages that appear after an action, add role="alert" (urgent) or role="status" (polite).