{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "alert",
  "name": "Alert",
  "category": "Feedback",
  "description": "Inline messages for information, success, warnings and errors, with optional actions and dismiss.",
  "tags": [
    "alert",
    "callout",
    "banner",
    "message",
    "notice",
    "error"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "alert message",
      "warning box",
      "error message",
      "success message",
      "info notice"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/alert",
  "markdownUrl": "https://mian.ro/ai/components/alert.md",
  "classes": [
    {
      "name": "mn-alert",
      "description": "Soft alert, info by default. Add a colour role."
    },
    {
      "name": "mn-alert-solid · mn-alert-neutral",
      "description": "Variants."
    },
    {
      "name": "mn-alert-icon · mn-alert-title · mn-alert-desc · mn-alert-actions",
      "description": "Parts."
    },
    {
      "name": "[data-mn-dismiss]",
      "description": "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": [
    {
      "title": "Colours",
      "description": null,
      "html": "<div class=\"mn-stack\" style=\"max-width:36rem\">\n  <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>\n  <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>\n  <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>\n  <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>\n</div>"
    },
    {
      "title": "With actions",
      "description": null,
      "html": "<div class=\"mn-alert mn-neutral\" style=\"max-width:36rem\">\n  <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>\n  <p class=\"mn-alert-title\">Try the Udon noodle</p>\n  <p class=\"mn-alert-desc\">Softer corners, warmer colours, roomier controls.</p>\n  <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>\n</div>"
    },
    {
      "title": "Solid",
      "description": null,
      "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>"
    }
  ],
  "css": ".mn-alert {\n  /* Role props do not inherit, so copy them into ordinary ones the\n     title and icon can read. */\n  --_a: var(--_c, var(--mn-info)); --_at: var(--_ct, var(--mn-info-text)); --_af: var(--_cf, var(--mn-info-fg));\n  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .25rem .75rem;\n  padding: .9rem 1rem;\n  border: var(--mn-border-w) solid color-mix(in oklab, var(--_a) 30%, var(--mn-border));\n  border-radius: var(--mn-radius-box);\n  background: color-mix(in oklab, var(--_a) 8%, var(--mn-surface));\n  color: var(--mn-fg); font-size: var(--mn-text-sm); line-height: 1.55;\n}\n.mn-alert:not(:has(> .mn-alert-icon)) { grid-template-columns: 1fr auto; }\n.mn-alert-icon { grid-row: span 2; display: flex; color: var(--_at); padding-top: .1rem; }\n.mn-alert-icon svg { width: 1.15rem; height: 1.15rem; }\n.mn-alert-title { margin: 0; font-weight: 600; color: var(--_at); }\n.mn-alert-desc { margin: 0; grid-column: -3 / -2; color: color-mix(in oklab, var(--mn-fg) 82%, var(--_at)); }\n.mn-alert:not(:has(> .mn-alert-icon)) .mn-alert-desc { grid-column: 1; }\n.mn-alert-actions { grid-row: 1 / span 2; grid-column: -2; display: flex; gap: .4rem; align-items: center; }\n.mn-alert-solid { background: var(--_a); border-color: var(--_a); color: var(--_af); }\n.mn-alert-solid :is(.mn-alert-title, .mn-alert-icon, .mn-alert-desc) { color: var(--_af); }\n.mn-alert-neutral { --_a: var(--mn-fg); --_at: var(--mn-fg); background: var(--mn-surface); border-color: var(--mn-border); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/alert.json"
  }
}