{
  "name": "close-button",
  "displayName": "Close button",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "button",
  "selector": ".l-close",
  "subItemOf": null,
  "summary": "A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.",
  "status": "stable",
  "appearances": [
    "ring",
    "square",
    "circle"
  ],
  "import": {
    "css": "luxen-ui/css/close-button/ring",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "data-appearance",
      "data": true,
      "values": [
        "ring",
        "square",
        "circle"
      ],
      "description": "Visual appearance (matches the imported appearance CSS)."
    },
    {
      "name": "command",
      "data": false,
      "values": [],
      "description": "Invoker command (typically `close`)."
    },
    {
      "name": "commandfor",
      "data": false,
      "values": [],
      "description": "ID of the target element to close."
    }
  ],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-close",
      "description": "Base close button with X icon via CSS mask."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--size",
      "default": "36px",
      "description": "Button size."
    },
    {
      "name": "--icon-color",
      "default": null,
      "description": "Icon color."
    },
    {
      "name": "--icon-size",
      "default": "24px",
      "description": "Icon size."
    },
    {
      "name": "--ring-color",
      "default": null,
      "description": "Hover ring color (`ring` appearance only)."
    },
    {
      "name": "--ring-tickness",
      "default": null,
      "description": "Hover ring thickness (`ring` appearance only)."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Ring appearance",
      "language": "html",
      "code": "<button class=\"l-close\" data-appearance=\"ring\" aria-label=\"Close\"></button>"
    }
  ]
}