{
  "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": "3ffc1a980bcc6617a62e97e3409fc144efccac9b71851659288fe41b362acb84",
  "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://5ecbdb78.eufemia-e25.pages.dev/uilib/components/badge/"
    },
    "props": {
      "local": "src/docs/uilib/components/badge/properties.mdx",
      "public": "https://5ecbdb78.eufemia-e25.pages.dev/uilib/components/badge/properties/"
    },
    "events": null,
    "demos": {
      "local": "src/docs/uilib/components/badge/demos.mdx",
      "public": "https://5ecbdb78.eufemia-e25.pages.dev/uilib/components/badge/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-23T13:39:32.922Z",
  "schemaVersion": 1
}