{
  "name": "button",
  "displayName": "Button",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "button",
  "selector": ".l-button",
  "subItemOf": null,
  "summary": "Buttons trigger actions such as submitting forms, confirming dialogs, or navigating.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/button",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables the button."
    },
    {
      "name": "command",
      "data": false,
      "values": [],
      "description": "Invoker command (`show-modal`, `close`, `show-popover`, etc.)."
    },
    {
      "name": "commandfor",
      "data": false,
      "values": [],
      "description": "ID of the target element for `command`."
    },
    {
      "name": "data-variant",
      "data": true,
      "values": [
        "primary",
        "destructive"
      ],
      "description": "Visual variant. Default is the secondary style."
    },
    {
      "name": "data-size",
      "data": true,
      "values": [
        "sm",
        "lg",
        "xl"
      ],
      "description": "Control size. Default is md."
    },
    {
      "name": "data-icon-only",
      "data": true,
      "values": [],
      "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
    },
    {
      "name": "data-press-effect",
      "data": true,
      "values": [],
      "description": "Press effect (scale + translate on active)."
    }
  ],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-button",
      "description": "Base button style."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--height",
      "default": "36px",
      "description": "Button height (md size)."
    },
    {
      "name": "--padding-inline",
      "default": "0.625rem",
      "description": "Horizontal padding."
    },
    {
      "name": "--background-color",
      "default": null,
      "description": "Background color."
    },
    {
      "name": "--background-color-hover",
      "default": null,
      "description": "Background color on hover."
    },
    {
      "name": "--background-color-active",
      "default": null,
      "description": "Background color on press."
    },
    {
      "name": "--text-color",
      "default": null,
      "description": "Text color."
    },
    {
      "name": "--text-color-hover",
      "default": null,
      "description": "Text color on hover."
    },
    {
      "name": "--border-color",
      "default": null,
      "description": "Border color."
    },
    {
      "name": "--border-color-hover",
      "default": null,
      "description": "Border color on hover."
    },
    {
      "name": "--font-size",
      "default": "0.875rem",
      "description": "Label font size. Stays 14px across all sizes; override to opt into a larger label."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Primary",
      "language": "html",
      "code": "<button class=\"l-button\" data-variant=\"primary\">Save</button>"
    }
  ]
}