{
  "tag": "ed-badge",
  "kind": "component",
  "summary": "Badges are used to draw attention and display statuses, counts or filters.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/badge/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/badge/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "The state of a record in a list or table, with a status variant — \"Active\", \"Expired\", \"Draft\"",
    "A category or type that sets an item apart — \"New\", \"AI-generated\"",
    "An unread count or alert on a navigation item or button, with the notification variant, so users see at a glance what needs them",
    "Active filters the user can remove, visible while the filter controls are collapsed"
  ],
  "notFor": [
    {
      "when": "A dismissible system message",
      "instead": "a toast, or [Notification](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/notification)"
    },
    {
      "when": "Explaining what a status means",
      "instead": "a [Tooltip](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip) or [Popover](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/popover)"
    },
    {
      "when": "Something the user clicks to trigger an action",
      "instead": "[Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button)"
    }
  ],
  "rules": [
    {
      "id": "badge/exceptions-not-the-norm",
      "rule": "Default to plain text, and use a badge only when the status is genuinely worth calling out: badge the exceptions, not the norm. Where nearly every item carries the same status, that default stays plain text and only the exception gets a badge — 199 rows \"No\", one \"Yes\".",
      "why": "A badge shared by every row provides no information — it is visual noise, and it buries the one that matters."
    },
    {
      "id": "badge/label",
      "rule": "Keep every badge label to two or three words — anything longer is plain inline text — and never a verb (\"Approve\", \"Archive\"). A status label is a past-tense adjective (\"Approved\", \"Archived\").",
      "check": "warning"
    },
    {
      "id": "badge/not-color-alone",
      "rule": "Pair the color with an icon or a text label, so the status reads without it.",
      "check": "warning"
    },
    {
      "id": "badge/notification-count",
      "rule": "Hide a notification badge at zero — never show \"0\" — and cap its count at 99+.",
      "check": "error"
    },
    {
      "id": "badge/motion",
      "rule": "Animate notification badges only, and stop once the user has acknowledged them. Never animate a status badge.",
      "check": "error"
    },
    {
      "id": "badge/pill",
      "rule": "Style filter chips as pills, and give them removal per chip, per group and for all filters at once; the remove affordance is reserved for pill badges. Never a pill for a notification badge.",
      "check": "error"
    },
    {
      "id": "badge/remove-is-yours",
      "rule": "`with-remove` fires `ed-remove`; removing the badge is yours.",
      "check": "warning"
    },
    {
      "id": "badge/one-value-per-status",
      "rule": "Show one value per status — a row's Status column holds one badge. An item with several independent statuses (metadata changed, attachment changed, archived) shows one badge for each, as a table gives each its own column.",
      "check": "warning"
    },
    {
      "id": "badge/no-promotion",
      "rule": "Never badge promotional or marketing content as if it were a personal notification."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "variant",
        "property": "variant",
        "type": "'new' | 'notification' | 'warning' | 'brand' | 'ai' | 'info' | 'neutral' | 'success' | 'danger' | 'expired' | 'notification-alt'",
        "default": "'info'",
        "description": "The badge's theme variant."
      },
      {
        "name": "pill",
        "property": "pill",
        "type": "boolean",
        "default": "false",
        "description": "Draws a pill-style badge with rounded edges. Mainly used to display filters"
      },
      {
        "name": "attention",
        "property": "attention",
        "type": "'none' | 'pulse' | 'bounce'",
        "default": "'none'",
        "description": "Adds an animation to draw attention to the badge."
      },
      {
        "name": "with-remove",
        "property": "withRemove",
        "type": "boolean",
        "default": "false",
        "description": "Makes the badge removable and shows a remove button. Although you could use removable without pill, our styleguide requires that only pill styled badges can be removable"
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The badge's accessible name. The only way to name a badge with no content, which renders as a dot. Mirrored onto the internal status node, where the role lives — an aria-label left on the host\nalone would sit on a role-less element and be ignored by assistive tech."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [
      {
        "name": "ed-remove",
        "react": "onEdRemove",
        "description": "Emitted when the remove button shown by `with-remove` is activated by click, Enter or Space. The badge does not remove itself — react to this event to take it out."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The badge's content."
      },
      {
        "name": "start",
        "description": "Content placed before the badge's main content. Typically used for icons."
      },
      {
        "name": "end",
        "description": "Content placed after the badge's main content. Typically used for icons. When `with-remove` is set, the default content is a remove button that emits `ed-remove` when activated by click, Enter or Space."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-badge-pulse-color",
        "description": "The color of the badge's pulse effect when using `attention=\"pulse\"`."
      },
      {
        "name": "--ed-badge-notification-color-scheme",
        "default": "light",
        "description": "The `color-scheme` inside a notification badge, so its colors stay put when the badge sits on a surface of the other scheme."
      },
      {
        "name": "--ed-badge-notification-alt-color-scheme",
        "default": "light",
        "description": "The same for the alternate notification badge."
      }
    ],
    "parts": [
      {
        "name": "remove-icon",
        "description": "The remove button shown when `with-remove` is set."
      },
      {
        "name": "base",
        "description": "The component's base wrapper."
      },
      {
        "name": "start",
        "description": "The container that wraps the `start` slot."
      },
      {
        "name": "end",
        "description": "The container that wraps the `end` slot."
      }
    ],
    "states": [
      {
        "name": "empty",
        "description": "Applied when the badge has no content. It then renders as a plain dot the size of the font: the padding is dropped, the box becomes a circle, and the `start` and `end` parts are hidden. A dot has no content to announce — give it an `aria-label`."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/badge/badge.js';",
  "react": {
    "component": "EdBadge",
    "import": "import EdBadge from '@eurodata/eurodata-ui/dist/react/badge/index.js';"
  }
}