{
  "tag": "ed-tab",
  "kind": "component",
  "summary": "Tabs are used inside [tab groups](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-group) to represent and activate [tab panels](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-panel).",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon",
    "ed-button"
  ],
  "use": [
    "The clickable label of one section inside a tab group, such as \"Overview\" or \"Documents\" in a client record",
    "A section label the user can close again, such as an opened document or comparison that is no longer needed",
    "A tab with an icon or counter next to its label, so a user sees at a glance which section has new items"
  ],
  "notFor": [
    {
      "when": "Used on its own as a button that triggers an action",
      "instead": "a [Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button)"
    },
    {
      "when": "Choosing one of two modes that reshape one view",
      "instead": "a [Radio Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio-group) in its button appearance"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "panel",
        "property": "panel",
        "type": "string",
        "default": "''",
        "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the tab and prevents selection."
      },
      {
        "name": "closable",
        "property": "closable",
        "type": "boolean",
        "default": "false",
        "description": "Make the tab closable"
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [
      {
        "name": "ed-tab-close",
        "react": "onEdTabClose",
        "type": "{ panel: string }",
        "description": "Emitted when the tab's close button is activated, or when Delete is pressed while the tab has focus."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The tab's label."
      },
      {
        "name": "start",
        "description": "An element, such as `<ed-icon>`, placed before the label."
      },
      {
        "name": "end",
        "description": "An element, such as `<ed-icon>`, placed after the label."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      },
      {
        "name": "content",
        "description": "The container that wraps the start slot, label and end slot."
      },
      {
        "name": "start",
        "description": "The container that wraps the `start` slot."
      },
      {
        "name": "end",
        "description": "The container that wraps the `end` slot."
      },
      {
        "name": "label",
        "description": "The label wrapper."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/tab/tab.js';",
  "react": {
    "component": "EdTab",
    "import": "import EdTab from '@eurodata/eurodata-ui/dist/react/tab/index.js';"
  }
}