{
  "name": "Badge",
  "category": "Data Display",
  "subcategory": "Cards & Layout",
  "description": "Small label for counts, statuses, or category tags.",
  "thumbnail": "/preview-cards/badge.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Badge/Badge.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-border",
    "--color-destructive",
    "--color-destructive-foreground",
    "--color-foreground",
    "--color-primary",
    "--color-primary-foreground",
    "--color-secondary",
    "--color-secondary-foreground",
    "--radius"
  ],
  "api": {
    "name": "Badge",
    "category": "Data Display",
    "subcategory": "Cards & Layout",
    "description": "Small label for counts, statuses, or category tags.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Badge/Badge.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "IconContent",
        "type": "RenderFragment?",
        "default": null,
        "description": "Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "BadgeVariant",
        "default": "BadgeVariant.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "IsDot",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Pulse",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "IsRemovable",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "OnRemove",
        "type": "EventCallback",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Animated",
        "type": "bool",
        "default": null,
        "description": "When true, the badge plays a one-shot pop-in entrance animation (scale + opacity) on mount. Default is false.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [
      {
        "name": "OnRemove",
        "type": "EventCallback",
        "description": null
      }
    ],
    "enums": [
      {
        "name": "BadgeVariant",
        "values": [
          "Default",
          "Secondary",
          "Destructive",
          "Outline",
          "Success",
          "Warning"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-destructive",
      "--color-destructive-foreground",
      "--color-foreground",
      "--color-primary",
      "--color-primary-foreground",
      "--color-secondary",
      "--color-secondary-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Variants",
        "code": "<Badge>Default</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Secondary\">Secondary</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Outline\">Outline</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Destructive\">Destructive</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Success\">Success</Badge>\n<Badge Variant=\"Badge.BadgeVariant.Warning\">Warning</Badge>"
      },
      {
        "title": "Variant (interactive)",
        "code": "<Segmented @bind-Value=\"_variant\">\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Default\">Default</SegmentedItem>\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Secondary\">Secondary</SegmentedItem>\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Outline\">Outline</SegmentedItem>\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Destructive\">Destructive</SegmentedItem>\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Success\">Success</SegmentedItem>\n    <SegmentedItem Value=\"@Badge.BadgeVariant.Warning\">Warning</SegmentedItem>\n</Segmented>\n<Badge Variant=\"@_variant\">@_variant.ToString()</Badge>\n\n@code { private Badge.BadgeVariant _variant = Badge.BadgeVariant.Default; }"
      },
      {
        "title": "Usage Examples",
        "code": "<Flex Align=\"center\" Gap=\"2\">\n    <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Status</Lumeo.Text>\n    <Badge Variant=\"Badge.BadgeVariant.Success\">Active</Badge>\n</Flex>\n<Flex Align=\"center\" Gap=\"2\">\n    <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">Priority</Lumeo.Text>\n    <Badge Variant=\"Badge.BadgeVariant.Destructive\">High</Badge>\n</Flex>"
      },
      {
        "title": "In a Card",
        "code": "<Card>\n    <CardHeader>\n        <Flex Align=\"center\" Justify=\"between\">\n            <Heading Level=\"3\" Size=\"lg\">Notifications</Heading>\n            <Badge>3 new</Badge>\n        </Flex>\n        <Lumeo.Text Size=\"sm\" Color=\"muted\">You have unread messages.</Lumeo.Text>\n    </CardHeader>\n</Card>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "badge",
  "docsUrl": "https://lumeo.nativ.sh/components/badge",
  "sourceUrl": [
    {
      "file": "UI/Badge/Badge.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Badge/Badge.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Badge/Badge.razor",
      "content": "@namespace Lumeo\n\n@if (!_isRemoved)\n{\n    @if (IsDot && Pulse)\n    {\n        <span class=\"relative inline-flex h-2 w-2\" @attributes=\"AdditionalAttributes\">\n            <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 @PulseColorClass\"></span>\n            <span class=\"relative inline-flex rounded-full h-2 w-2 @DotClasses @Class\"></span>\n        </span>\n    }\n    else if (IsDot)\n    {\n        <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\"></div>\n    }\n    else\n    {\n        <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n            @if (IconContent != null)\n            {\n                <span class=\"mr-1 inline-flex items-center\">@IconContent</span>\n            }\n            @ChildContent\n            @if (IsRemovable)\n            {\n                <button type=\"button\" class=\"ml-1 rounded-full hover:bg-foreground/20 focus:outline-none\" @onclick=\"HandleRemove\" aria-label=\"Remove\">\n                    <Blazicon Svg=\"Lucide.X\" class=\"h-3 w-3\" />\n                </button>\n            }\n        </div>\n    }\n}\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n\n    /// <summary>Icon slot. Named <c>IconContent</c> to avoid shadowing the <c>&lt;Icon&gt;</c> component.</summary>\n    [Parameter] public RenderFragment? IconContent { get; set; }\n\n    [Parameter] public BadgeVariant Variant { get; set; } = BadgeVariant.Default;\n    [Parameter] public bool IsDot { get; set; }\n    [Parameter] public bool Pulse { get; set; }\n    [Parameter] public bool IsRemovable { get; set; }\n    [Parameter] public EventCallback OnRemove { get; set; }\n\n    /// <summary>\n    /// When true, the badge plays a one-shot pop-in entrance animation\n    /// (scale + opacity) on mount. Default is <c>false</c>.\n    /// </summary>\n    [Parameter] public bool Animated { get; set; }\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private bool _isRemoved;\n\n    private string CssClass\n    {\n        get\n        {\n            var animatedClass = Animated ? \"lumeo-badge-animated\" : null;\n            return IsDot\n                ? string.Join(\" \", new[] { \"inline-flex h-2 w-2 rounded-full p-0\", VariantClasses, animatedClass, Class }.Where(s => !string.IsNullOrWhiteSpace(s)))\n                : string.Join(\" \", new[] { BaseClasses, VariantClasses, animatedClass, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n        }\n    }\n\n    private const string BaseClasses = \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none\";\n\n    private string DotClasses => VariantClasses;\n\n    private string PulseColorClass => Variant switch\n    {\n        BadgeVariant.Default => \"bg-primary\",\n        BadgeVariant.Secondary => \"bg-secondary\",\n        BadgeVariant.Destructive => \"bg-destructive\",\n        BadgeVariant.Outline => \"bg-foreground\",\n        BadgeVariant.Success => \"bg-success-text\",\n        BadgeVariant.Warning => \"bg-warning-text\",\n        _ => \"bg-primary\"\n    };\n\n    private string VariantClasses => Variant switch\n    {\n        BadgeVariant.Default => \"border-transparent bg-primary text-primary-foreground shadow\",\n        BadgeVariant.Secondary => \"border-transparent bg-secondary text-secondary-foreground\",\n        BadgeVariant.Destructive => \"border-transparent bg-destructive text-destructive-foreground shadow\",\n        BadgeVariant.Outline => \"border-border/60 text-foreground\",\n        BadgeVariant.Success => \"border-transparent bg-success-light text-success-text\",\n        BadgeVariant.Warning => \"border-transparent bg-warning-light text-warning-text\",\n        _ => \"\"\n    };\n\n    private async Task HandleRemove()\n    {\n        _isRemoved = true;\n        await OnRemove.InvokeAsync();\n    }\n\n    public enum BadgeVariant { Default, Secondary, Destructive, Outline, Success, Warning }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Badge",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "IconContent",
      "owner": "Badge",
      "type": "RenderFragment?",
      "description": "Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component."
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests.E2E/Smokes/SearchPaletteTests.cs",
    "tests/Lumeo.Tests/Components/Badge/BadgeAnimatedTests.cs",
    "tests/Lumeo.Tests/Components/Badge/BadgeTests.cs",
    "tests/Lumeo.Tests/Components/BottomNav/BottomNavItemTests.cs"
  ],
  "mdSummary": "# Badge\n\nSmall label for counts, statuses, or category tags.\n\n**Package:** `Lumeo` · **Category:** Data Display/Cards & Layout\n**Docs:** https://lumeo.nativ.sh/components/badge\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Badge | ChildContent | `RenderFragment?` | `` |  |\n| Badge | IconContent | `RenderFragment?` | `` | Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component. |\n| Badge | Variant | `BadgeVariant` | `BadgeVariant.Default` |  |\n| Badge | IsDot | `bool` | `` |  |\n| Badge | Pulse | `bool` | `` |  |\n| Badge | IsRemovable | `bool` | `` |  |\n| Badge | OnRemove | `EventCallback` | `` |  |\n| Badge | Animated | `bool` | `` | When true, the badge plays a one-shot pop-in entrance animation (scale + opacity) on mount. Default is false. |\n| Badge | Class | `string?` | `` |  |\n| Badge | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Badge) — RenderFragment slot\n- `IconContent` (Badge) — Icon slot. Named IconContent to avoid shadowing the &lt;Icon&gt; component.\n\n## Events\n- `OnRemove` (`EventCallback`)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Badge />\n```\n\n## CSS variables\n`--color-border`, `--color-destructive`, `--color-destructive-foreground`, `--color-foreground`, `--color-primary`, `--color-primary-foreground`, `--color-secondary`, `--color-secondary-foreground`, `--radius`\n\n## Files\n- `UI/Badge/Badge.razor`\n"
}