# Alert · MIAN

Inline messages for information, success, warnings and errors, with optional actions and dismiss.

- Id: `alert` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/alert
- Use for: alert message, warning box, error message, success message, info notice.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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).

## Examples

### Colours

```html
<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

```html
<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

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/alert/source