{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "button",
  "name": "Button",
  "category": "Actions",
  "description": "Triggers an action. Six colour roles, five variants, four sizes, icon-only, loading and disabled states.",
  "tags": [
    "button",
    "action",
    "cta",
    "submit",
    "icon button",
    "loading"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "button",
      "call to action button",
      "submit button",
      "icon button",
      "loading button",
      "destructive action"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/button",
  "markdownUrl": "https://mian.ro/ai/components/button.md",
  "classes": [
    {
      "name": "mn-btn",
      "description": "Base button. Solid, primary colour by default."
    },
    {
      "name": "mn-btn-outline",
      "description": "Bordered, transparent background. Neutral unless a colour role is added."
    },
    {
      "name": "mn-btn-soft",
      "description": "Tinted background, coloured text."
    },
    {
      "name": "mn-btn-ghost",
      "description": "No background until hover."
    },
    {
      "name": "mn-btn-link",
      "description": "Looks like a link, behaves like a button."
    },
    {
      "name": "mn-btn-xs · mn-btn-sm · mn-btn-lg",
      "description": "Sizes. Heights come from the noodle's density."
    },
    {
      "name": "mn-btn-icon",
      "description": "Square, for a single icon. Give it an aria-label."
    },
    {
      "name": "mn-btn-block · mn-btn-pill",
      "description": "Full width · fully rounded."
    },
    {
      "name": "mn-primary · mn-secondary · mn-accent · mn-success · mn-warning · mn-danger · mn-info · mn-neutral",
      "description": "Colour roles. Combine with any variant."
    },
    {
      "name": "aria-busy=\"true\"",
      "description": "Loading state: hides the label, shows a spinner, blocks clicks."
    }
  ],
  "accessibility": [
    "Use a real <button> for actions and <a class=\"mn-btn\"> for navigation.",
    "Icon-only buttons need an aria-label; the icon itself is aria-hidden.",
    "aria-busy=\"true\" is announced by screen readers and prevents double submission.",
    "Disabled buttons use the native disabled attribute; for a focusable disabled state use aria-disabled=\"true\"."
  ],
  "examples": [
    {
      "title": "Variants",
      "description": null,
      "html": "<button class=\"mn-btn\">Primary</button>\n<button class=\"mn-btn mn-secondary\">Secondary</button>\n<button class=\"mn-btn mn-btn-outline\">Outline</button>\n<button class=\"mn-btn mn-btn-soft\">Soft</button>\n<button class=\"mn-btn mn-btn-ghost\">Ghost</button>\n<button class=\"mn-btn mn-btn-link\">Link</button>"
    },
    {
      "title": "Colours",
      "description": "Every colour role works with every variant.",
      "html": "<button class=\"mn-btn mn-accent\">Accent</button>\n<button class=\"mn-btn mn-success\">Success</button>\n<button class=\"mn-btn mn-warning\">Warning</button>\n<button class=\"mn-btn mn-danger\">Danger</button>\n<button class=\"mn-btn mn-btn-soft mn-danger\">Soft danger</button>\n<button class=\"mn-btn mn-btn-outline mn-success\">Outline success</button>"
    },
    {
      "title": "Sizes",
      "description": null,
      "html": "<button class=\"mn-btn mn-btn-xs\">Extra small</button>\n<button class=\"mn-btn mn-btn-sm\">Small</button>\n<button class=\"mn-btn\">Default</button>\n<button class=\"mn-btn mn-btn-lg\">Large</button>"
    },
    {
      "title": "With icons",
      "description": null,
      "html": "<button class=\"mn-btn\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m3 7 9 6 9-6\"/></svg> Send email</button>\n<button class=\"mn-btn mn-btn-outline\">Continue <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"/></svg></button>\n<button class=\"mn-btn mn-btn-icon mn-btn-outline\" aria-label=\"Settings\"><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=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z\"/></svg></button>\n<button class=\"mn-btn mn-btn-icon mn-btn-ghost\" aria-label=\"More options\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"5\" cy=\"12\" r=\"1.2\"/><circle cx=\"12\" cy=\"12\" r=\"1.2\"/><circle cx=\"19\" cy=\"12\" r=\"1.2\"/></svg></button>\n<button class=\"mn-btn mn-btn-icon mn-btn-pill mn-danger\" aria-label=\"Delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14\"/></svg></button>"
    },
    {
      "title": "States",
      "description": null,
      "html": "<button class=\"mn-btn\" aria-busy=\"true\">Saving</button>\n<button class=\"mn-btn mn-btn-outline\" disabled>Disabled</button>\n<a class=\"mn-btn mn-btn-soft\" href=\"#button\">Link styled as button</a>"
    },
    {
      "title": "Block",
      "description": null,
      "html": "<button class=\"mn-btn mn-btn-block mn-btn-lg\">Create account</button>"
    }
  ],
  "css": ".mn-btn {\n  --_h: var(--mn-size-md);\n  --_bg: var(--_c, var(--mn-primary));\n  --_fg: var(--_cf, var(--mn-primary-fg));\n  --_bd: transparent;\n  position: relative;\n  display: inline-flex; align-items: center; justify-content: center; gap: .5em;\n  height: var(--_h); min-width: var(--_h);\n  padding: 0 calc(var(--_h) * .4);\n  border: var(--mn-border-w) solid var(--_bd);\n  border-radius: var(--mn-radius-field);\n  background: var(--_bg);\n  color: var(--_fg);\n  font: 500 var(--mn-text-sm)/1 var(--mn-font);\n  white-space: nowrap; text-decoration: none; vertical-align: middle;\n  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;\n  box-shadow: var(--mn-shadow-sm);\n  transition: background-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease),\n              border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease),\n              transform var(--mn-duration) var(--mn-ease);\n}\n.mn-btn:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 88%, var(--mn-bg)); }\n.mn-btn:active { transform: translateY(1px); }\n.mn-btn:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-btn svg { width: 1.15em; height: 1.15em; flex: none; }\n\n.mn-btn-outline { --_bg: transparent; --_fg: var(--_ct, var(--mn-fg)); --_bd: var(--_c, var(--mn-input)); box-shadow: none; }\n.mn-btn-outline:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-fg)) 8%, transparent); }\n.mn-btn-soft { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 14%, transparent); --_fg: var(--_ct, var(--mn-primary-text)); box-shadow: none; }\n.mn-btn-soft:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 22%, transparent); }\n.mn-btn-ghost { --_bg: transparent; --_fg: var(--_ct, var(--mn-fg)); box-shadow: none; }\n.mn-btn-ghost:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-fg)) 9%, transparent); }\n.mn-btn-link { --_bg: transparent; --_fg: var(--_ct, var(--mn-link)); box-shadow: none; padding-inline: .25em; text-underline-offset: 4px; }\n.mn-btn-link:hover { --_bg: transparent; text-decoration: underline; }\n\n.mn-btn-xs { --_h: var(--mn-size-xs); font-size: calc(var(--mn-text-sm) - 2px); gap: .35em; }\n.mn-btn-sm { --_h: var(--mn-size-sm); font-size: calc(var(--mn-text-sm) - 1px); }\n.mn-btn-lg { --_h: var(--mn-size-lg); font-size: calc(var(--mn-text-sm) + 1px); }\n.mn-btn-icon { padding: 0; width: var(--_h); }\n.mn-btn-block { display: flex; width: 100%; }\n.mn-btn-pill { border-radius: 999px; }\n\n.mn-btn:disabled, .mn-btn[aria-disabled=\"true\"] { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; }\n.mn-btn[aria-busy=\"true\"] { color: transparent; pointer-events: none; }\n.mn-btn[aria-busy=\"true\"]::after {\n  content: \"\"; position: absolute; inset: 0; margin: auto;\n  width: 1.1em; height: 1.1em; border-radius: 50%;\n  border: 2px solid var(--_fg); border-right-color: transparent;\n  animation: mn-spin .7s linear infinite;",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/button.json"
  }
}