{
  "id": "uilib/components/badge",
  "name": "Badge",
  "description": "The Badge component allows the user to focus on new or unread content or notifications.",
  "group": "components",
  "slug": "/uilib/components/badge/",
  "props": [
    {
      "name": "content",
      "doc": "Content of the component.",
      "type": [
        "string",
        "number",
        "React.ReactNode"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "children",
      "doc": "Content to display the badge on top of.",
      "type": "React.ReactNode",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "vertical",
      "doc": "Vertical positioning of the component. Options: `bottom` | `top`.",
      "type": [
        "top",
        "bottom"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "horizontal",
      "doc": "Horizontal positioning of the component. Options: `left` | `right`.",
      "type": [
        "left",
        "right"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "className",
      "doc": "Custom className for the component.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skeleton",
      "doc": "Applies loading skeleton.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "variant",
      "doc": "defines the visual appearance of the badge. There are two main variants `notification` and `information`. The `content` variant is just for placement purposes, and will require you to style the `content` all by yourself. The default variant is `information`.",
      "type": [
        "information",
        "notification",
        "content"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label",
      "doc": "The label description of the badge. Only required when passing a number as the badge content.",
      "type": "React.ReactNode",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [],
  "related": [
    "Space"
  ],
  "checksum": "b659b2723e66730b256aebdbda09f302dcfe59d97e9bcbbb179c24aef21e9fe3",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/badge/Badge.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/badge/Badge.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/badge.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/badge/"
    },
    "props": {
      "local": "src/docs/uilib/components/badge/properties.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/badge/properties/"
    },
    "events": null,
    "demos": {
      "local": "src/docs/uilib/components/badge/demos.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/badge/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T11:12:43.758Z",
  "schemaVersion": 1
}