{
  "name": "badge",
  "displayName": "Badge",
  "type": "custom",
  "isCustomElement": true,
  "tag": "l-badge",
  "nativeTag": null,
  "selector": "l-badge",
  "subItemOf": null,
  "summary": "A badge component for displaying small status indicators.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/badge",
    "js": "luxen-ui/badge"
  },
  "properties": [
    {
      "name": "variant",
      "attribute": "variant",
      "type": "BadgeVariant | undefined",
      "default": null,
      "reflects": true,
      "description": "Style variant: `info`, `success`, `warning`, `danger`, or `neutral` (default)"
    },
    {
      "name": "pill",
      "attribute": "pill",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Display as pill shape"
    },
    {
      "name": "size",
      "attribute": "size",
      "type": "BadgeSize | undefined",
      "default": null,
      "reflects": true,
      "description": "Badge size: `sm`, `lg`. Default is md."
    },
    {
      "name": "appearance",
      "attribute": "appearance",
      "type": "BadgeAppearance | undefined",
      "default": null,
      "reflects": true,
      "description": "Visual appearance: `filled`, `filled-outlined`, `accent`. Default is outlined."
    }
  ],
  "attributes": [],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--text-color",
      "default": null,
      "description": "Label color. The border is a tint of it, so this alone repaints an outlined badge. Defaults to the `variant` step."
    },
    {
      "name": "--background-color",
      "default": null,
      "description": "Badge fill. Defaults to the `appearance` step — transparent when outlined."
    },
    {
      "name": "--border-color",
      "default": null,
      "description": "Badge border. Defaults to a 30% tint of `--text-color`; setting it replaces that derivation and holds through `appearance=\"filled\"`, whose default line is transparent."
    },
    {
      "name": "--border-radius",
      "default": "--l-radius-md",
      "description": "Corner radius. The corner stays a squircle; `pill` is what trades it for a true arc."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-badge variant=\"success\">Active</l-badge>\n<l-badge class=\"chip-site\">\n  <l-icon name=\"mdi:map-marker-outline\"></l-icon>\n  Lyon branch\n</l-badge>"
    }
  ]
}