{
  "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. Default variant is `information`.",
      "type": [
        "\"information\"",
        "\"notification\"",
        "\"content\""
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status",
      "doc": "Defines the status color of the `\"information\"` variant. Has no effect on other variants. Default is `\"default\"`.",
      "type": [
        "\"default\"",
        "\"success\"",
        "\"warning\"",
        "\"error\"",
        "\"neutral\""
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "subtle",
      "doc": "Applies subtle style to `\"information\"` variant. Has no effect on other variants. Default is `false`.",
      "type": "boolean",
      "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": "58b496d727591061f04f8beb375f9bd5d0f434302646dd7a98b207d24148144e",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/badge/Badge.tsx",
    "fileUrl": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/badge/Badge.tsx",
    "dirUrl": "https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/badge"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/badge.mdx",
      "public": "https://927e0239.eufemia-e25.pages.dev/uilib/components/badge/"
    },
    "props": {
      "local": "src/docs/uilib/components/badge/properties.mdx",
      "public": "https://927e0239.eufemia-e25.pages.dev/uilib/components/badge/properties/"
    },
    "events": null,
    "demos": {
      "local": "src/docs/uilib/components/badge/demos.mdx",
      "public": "https://927e0239.eufemia-e25.pages.dev/uilib/components/badge/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2026-01-19T15:57:02.374Z",
  "schemaVersion": 1
}