@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/label/react.js

@@ -0,0 +1,417 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import '../../../../../react-core/src/components/Label/examples/./Label.css';
+const pageData = {
+  "id": "Label",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/label/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Label/examples/Label.md",
+  "relPath": "packages/react-core/src/components/Label/examples/Label.md",
+  "propComponents": [
+    {
+      "name": "Label",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the label."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the label.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "closeBtn",
+          "type": "React.ReactNode",
+          "description": "Node for custom close button."
+        },
+        {
+          "name": "closeBtnAriaLabel",
+          "type": "string",
+          "description": "Aria label for close button"
+        },
+        {
+          "name": "closeBtnProps",
+          "type": "any",
+          "description": "Additional properties for the default close button."
+        },
+        {
+          "name": "color",
+          "type": "'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow' | LabelColor",
+          "description": "Color of the label.",
+          "defaultValue": "LabelColor.grey"
+        },
+        {
+          "name": "editableProps",
+          "type": "any",
+          "description": "Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control."
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in."
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon added to the left of the label text. Overrides the icon set by the status property."
+        },
+        {
+          "name": "isClickable",
+          "type": "boolean",
+          "description": "Flag indicating the label is clickable. This flag will automatically be set if a href is passed, or if an onClick handler is passed and the label is not an overflow or add variant. This should be manually set when using the render prop.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isCompact",
+          "type": "boolean",
+          "description": "Flag indicating the label is compact.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isEditable",
+          "type": "boolean",
+          "description": "Flag indicating the label is editable.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent) => void",
+          "description": "Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in."
+        },
+        {
+          "name": "onClose",
+          "type": "(event: React.MouseEvent) => void",
+          "description": "Close click callback for removable labels. If present, label will have a close button."
+        },
+        {
+          "name": "onEditCancel",
+          "type": "(event: KeyboardEvent, previousText: string) => void",
+          "description": "Callback when an editable label cancels an edit."
+        },
+        {
+          "name": "onEditComplete",
+          "type": "(event: MouseEvent | KeyboardEvent, newText: string) => void",
+          "description": "Callback when an editable label completes an edit."
+        },
+        {
+          "name": "render",
+          "type": "({\n  className,\n  content,\n  componentRef\n}: {\n  className: string;\n  content: React.ReactNode;\n  componentRef: any;\n}) => React.ReactNode",
+          "description": "Forwards the label content and className to rendered function.  Use this prop for react router support."
+        },
+        {
+          "name": "status",
+          "type": "'success' | 'warning' | 'danger' | 'info' | 'custom'",
+          "description": "Status of the label with a respective icon and color. Overrides the color set by the color property."
+        },
+        {
+          "name": "textMaxWidth",
+          "type": "string",
+          "description": "The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'."
+        },
+        {
+          "name": "tooltipPosition",
+          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Position of the tooltip which is displayed if text is truncated"
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'filled' | 'overflow' | 'add'",
+          "description": "Variant of the label.",
+          "defaultValue": "'filled'"
+        }
+      ]
+    },
+    {
+      "name": "LabelGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "addLabelControl",
+          "type": "React.ReactNode",
+          "description": "Control for adding new labels"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Aria label for label group that does not have a category name",
+          "defaultValue": "'Label group category'"
+        },
+        {
+          "name": "categoryName",
+          "type": "string",
+          "description": "Category name text for the label group category.  If this prop is supplied the label group with have a label and category styling applied",
+          "defaultValue": "''"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the label group. Should be <Label> elements."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the label item"
+        },
+        {
+          "name": "closeBtnAriaLabel",
+          "type": "string",
+          "description": "Aria label for close button",
+          "defaultValue": "'Close label group'"
+        },
+        {
+          "name": "collapsedText",
+          "type": "string",
+          "description": "Customizable template string. Use variable \"${remaining}\" for the overflow label count.",
+          "defaultValue": "'${remaining} more'"
+        },
+        {
+          "name": "defaultIsOpen",
+          "type": "boolean",
+          "description": "Flag for having the label group default to expanded",
+          "defaultValue": "false"
+        },
+        {
+          "name": "editableTextAreaProps",
+          "type": "any",
+          "description": "Additional props passed to the editable textarea."
+        },
+        {
+          "name": "expandedText",
+          "type": "string",
+          "description": "Customizable \"Show Less\" text string",
+          "defaultValue": "'Show Less'"
+        },
+        {
+          "name": "hasEditableTextArea",
+          "type": "boolean",
+          "description": "Flag indicating the editable label group should be appended with a textarea.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isClosable",
+          "type": "boolean",
+          "description": "Flag if label group can be closed",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isCompact",
+          "type": "boolean",
+          "description": "Flag indicating the labels in the group are compact",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isEditable",
+          "type": "boolean",
+          "description": "Flag indicating contained labels are editable. Allows spacing for a text input after the labels.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isVertical",
+          "type": "boolean",
+          "description": "Flag to implement a vertical layout",
+          "defaultValue": "false"
+        },
+        {
+          "name": "numLabels",
+          "type": "number",
+          "description": "Set number of labels to show before overflow",
+          "defaultValue": "3"
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent) => void",
+          "description": "Function that is called when clicking on the label group close button",
+          "defaultValue": "(_e: React.MouseEvent) => undefined as any"
+        },
+        {
+          "name": "tooltipPosition",
+          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Position of the tooltip which is displayed if the category name text is longer",
+          "defaultValue": "'top'"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-label",
+    "pf-v6-c-label-group"
+  ],
+  "examples": [
+    "Filled labels",
+    "Outlined labels",
+    "Compact labels",
+    "Label with custom render",
+    "Editable labels",
+    "Basic label group",
+    "Label group with overflow",
+    "Label group with categories",
+    "Label group with removable categories",
+    "Vertical label group",
+    "Editable label group",
+    "Editable label group with add button"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  CubeIcon,
+  RhUiInformationFillIcon
+};
+pageData.relativeImports = "import 'react-core/src/components/Label/examples/./Label.css';"
+pageData.examples = {
+  'Filled labels': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Label, LabelColor, LabelStatus } from '@patternfly/react-core';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const LabelFilled: React.FunctionComponent = () => {\n  const logColor = (color: string) => {\n    // eslint-disable-next-line no-console\n    console.log(color, 'label clicked');\n  };\n  return (\n    <Fragment>\n      <strong>Non-status:</strong>\n      <br />\n      <br />\n      <Label>Grey</Label>\n      <Label icon={<CubeIcon />}>Grey icon</Label>\n      <Label onClose={() => Function.prototype}>Grey removable</Label>\n      <Label icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Grey icon removable\n      </Label>\n      <Label href=\"#filled\">Grey link</Label>\n      <Label href=\"#filled\" onClose={() => Function.prototype}>\n        Grey link removable\n      </Label>{' '}\n      <Label onClick={() => logColor('grey')}>Grey clickable</Label>{' '}\n      <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>\n        Grey clickable removable\n      </Label>{' '}\n      <Label icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Grey label with icon that overflows\n      </Label>{' '}\n      <Label isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Grey link removable (disabled)\n      </Label>{' '}\n      <Label isDisabled icon={<CubeIcon />} onClick={() => logColor('grey')} onClose={() => Function.prototype}>\n        Grey clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.blue}>Blue</Label>\n      <Label color={LabelColor.blue} icon={<CubeIcon />}>\n        Blue icon\n      </Label>\n      <Label color={LabelColor.blue} onClose={() => Function.prototype}>\n        Blue removable\n      </Label>\n      <Label color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Blue icon removable\n      </Label>\n      <Label color={LabelColor.blue} href=\"#filled\">\n        Blue link\n      </Label>\n      <Label color={LabelColor.blue} href=\"#filled\" onClose={() => Function.prototype}>\n        Blue link removable\n      </Label>{' '}\n      <Label color={LabelColor.blue} onClick={() => logColor('blue')}>\n        Blue clickable\n      </Label>\n      <Label color={LabelColor.blue} onClick={() => logColor('blue')} onClose={() => Function.prototype}>\n        Blue clickable removable\n      </Label>{' '}\n      <Label color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Blue label with icon that overflows\n      </Label>{' '}\n      <Label color={LabelColor.blue} isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Blue link removable (disabled)\n      </Label>{' '}\n      <Label\n        color={LabelColor.blue}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('blue')}\n        onClose={() => Function.prototype}\n      >\n        Blue clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.green}>Green</Label>\n      <Label color={LabelColor.green} icon={<CubeIcon />}>\n        Green icon\n      </Label>\n      <Label color={LabelColor.green} onClose={() => Function.prototype}>\n        Green removable\n      </Label>\n      <Label color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Green icon removable\n      </Label>\n      <Label color={LabelColor.green} href=\"#filled\">\n        Green link\n      </Label>\n      <Label color={LabelColor.green} href=\"#filled\" onClose={() => Function.prototype}>\n        Green link removable\n      </Label>{' '}\n      <Label color={LabelColor.green} onClick={() => logColor('green')}>\n        Green clickable\n      </Label>\n      <Label color={LabelColor.green} onClick={() => logColor('green')} onClose={() => Function.prototype}>\n        Green clickable removable\n      </Label>{' '}\n      <Label color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Green label with icon that overflows\n      </Label>{' '}\n      <Label color={LabelColor.green} isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Green link removable (disabled)\n      </Label>{' '}\n      <Label\n        color={LabelColor.green}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('green')}\n        onClose={() => Function.prototype}\n      >\n        Green clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.orange}>Orange</Label>\n      <Label color={LabelColor.orange} icon={<CubeIcon />}>\n        Orange icon\n      </Label>\n      <Label color={LabelColor.orange} onClose={() => Function.prototype}>\n        Orange removable\n      </Label>\n      <Label color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Orange icon removable\n      </Label>\n      <Label color={LabelColor.orange} href=\"#filled\">\n        Orange link\n      </Label>\n      <Label color={LabelColor.orange} href=\"#filled\" onClose={() => Function.prototype}>\n        Orange link removable\n      </Label>{' '}\n      <Label color={LabelColor.orange} onClick={() => logColor('orange')}>\n        Orange clickable\n      </Label>\n      <Label color={LabelColor.orange} onClick={() => logColor('orange')} onClose={() => Function.prototype}>\n        Orange clickable removable\n      </Label>{' '}\n      <Label color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Orange label with icon that overflows\n      </Label>{' '}\n      <Label color={LabelColor.orange} isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Orange link removable (disabled)\n      </Label>{' '}\n      <Label\n        color={LabelColor.orange}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('orange')}\n        onClose={() => Function.prototype}\n      >\n        Orange clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.red}>Red</Label>\n      <Label color={LabelColor.red} icon={<CubeIcon />}>\n        Red icon\n      </Label>\n      <Label color={LabelColor.red} onClose={() => Function.prototype}>\n        Red removable\n      </Label>\n      <Label color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Red icon removable\n      </Label>\n      <Label color={LabelColor.red} href=\"#filled\">\n        Red link\n      </Label>\n      <Label color={LabelColor.red} href=\"#filled\" onClose={() => Function.prototype}>\n        Red link removable\n      </Label>{' '}\n      <Label color={LabelColor.red} onClick={() => logColor('red')}>\n        Red clickable\n      </Label>\n      <Label color={LabelColor.red} onClick={() => logColor('red')} onClose={() => Function.prototype}>\n        Red clickable removable\n      </Label>{' '}\n      <Label color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Red label with icon that overflows\n      </Label>{' '}\n      <Label color={LabelColor.red} isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Red link removable (disabled)\n      </Label>{' '}\n      <Label\n        color={LabelColor.red}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('red')}\n        onClose={() => Function.prototype}\n      >\n        Red clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.orangered}>Orange red</Label>\n      <Label color={LabelColor.orangered} icon={<CubeIcon />}>\n        Orange red icon\n      </Label>\n      <Label color={LabelColor.orangered} onClose={() => Function.prototype}>\n        Orange red removable\n      </Label>\n      <Label color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Orange red icon removable\n      </Label>\n      <Label color={LabelColor.orangered} href=\"#filled\">\n        Orange red link\n      </Label>\n      <Label color={LabelColor.orangered} href=\"#filled\" onClose={() => Function.prototype}>\n        Orange red link removable\n      </Label>\n      <Label color={LabelColor.orangered} onClick={() => logColor('orangered')}>\n        Orange red clickable\n      </Label>\n      <Label color={LabelColor.orangered} onClick={() => logColor('orangered')} onClose={() => Function.prototype}>\n        Orange red clickable removable\n      </Label>\n      <Label color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Orange red label with icon that overflows\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.purple}>Purple</Label>\n      <Label color={LabelColor.purple} icon={<CubeIcon />}>\n        Purple icon\n      </Label>\n      <Label color={LabelColor.purple} onClose={() => Function.prototype}>\n        Purple removable\n      </Label>\n      <Label color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Purple icon removable\n      </Label>\n      <Label color={LabelColor.purple} href=\"#filled\">\n        Purple link\n      </Label>\n      <Label color={LabelColor.purple} href=\"#filled\" onClose={() => Function.prototype}>\n        Purple link removable\n      </Label>{' '}\n      <Label color={LabelColor.purple} onClick={() => logColor('purple')}>\n        Purple clickable\n      </Label>\n      <Label color={LabelColor.purple} onClick={() => logColor('purple')} onClose={() => Function.prototype}>\n        Purple clickable removable\n      </Label>{' '}\n      <Label color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Purple label with icon that overflows\n      </Label>{' '}\n      <Label color={LabelColor.purple} isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Purple link removable (disabled)\n      </Label>{' '}\n      <Label\n        color={LabelColor.purple}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('purple')}\n        onClose={() => Function.prototype}\n      >\n        Purple clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.teal}>Teal</Label>\n      <Label color={LabelColor.teal} icon={<CubeIcon />}>\n        Teal icon\n      </Label>\n      <Label color={LabelColor.teal} onClose={() => Function.prototype}>\n        Teal removable\n      </Label>\n      <Label color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Teal icon removable\n      </Label>\n      <Label color={LabelColor.teal} href=\"#filled\">\n        Teal link\n      </Label>\n      <Label color={LabelColor.teal} href=\"#filled\" onClose={() => Function.prototype}>\n        Teal link removable\n      </Label>{' '}\n      <Label color={LabelColor.teal} onClick={() => logColor('teal')}>\n        Teal clickable\n      </Label>\n      <Label color={LabelColor.teal} onClick={() => logColor('teal')} onClose={() => Function.prototype}>\n        Teal clickable removable\n      </Label>{' '}\n      <Label color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Teal label with icon that overflows\n      </Label>{' '}\n      <Label color={LabelColor.teal} isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Teal link removable (disabled)\n      </Label>{' '}\n      <Label\n        color={LabelColor.teal}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('teal')}\n        onClose={() => Function.prototype}\n      >\n        Teal clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label color={LabelColor.yellow}>Yellow</Label>\n      <Label color={LabelColor.yellow} icon={<CubeIcon />}>\n        Yellow icon\n      </Label>\n      <Label color={LabelColor.yellow} onClose={() => Function.prototype}>\n        Yellow removable\n      </Label>\n      <Label color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Yellow icon removable\n      </Label>\n      <Label color={LabelColor.yellow} href=\"#filled\">\n        Yellow link\n      </Label>\n      <Label color={LabelColor.yellow} href=\"#filled\" onClose={() => Function.prototype}>\n        Yellow link removable\n      </Label>{' '}\n      <Label color={LabelColor.yellow} onClick={() => logColor('yellow')}>\n        Yellow clickable\n      </Label>\n      <Label color={LabelColor.yellow} onClick={() => logColor('yellow')} onClose={() => Function.prototype}>\n        Yellow clickable removable\n      </Label>{' '}\n      <Label color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Yellow label with icon that overflows\n      </Label>{' '}\n      <Label color={LabelColor.yellow} isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Yellow link removable (disabled)\n      </Label>{' '}\n      <Label\n        color={LabelColor.yellow}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('yellow')}\n        onClose={() => Function.prototype}\n      >\n        Yellow clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <div style={{ width: '250px' }}>\n        <Label>Label that overflows its parent, but has no textMaxWidth on its own</Label>\n      </div>\n      <br />\n      <strong>Status:</strong>\n      <br />\n      <br />\n      <Label status={LabelStatus.success}>Success</Label>\n      <Label status={LabelStatus.success} onClose={() => Function.prototype}>\n        Success removable\n      </Label>\n      <Label status={LabelStatus.success} href=\"#filled\">\n        Success link\n      </Label>\n      <Label status={LabelStatus.success} href=\"#filled\" onClose={() => Function.prototype}>\n        Success link removable\n      </Label>\n      <Label status={LabelStatus.success} onClick={() => logColor('success')}>\n        Success clickable\n      </Label>\n      <Label status={LabelStatus.success} onClick={() => logColor('success')} onClose={() => Function.prototype}>\n        Success clickable removable\n      </Label>\n      <Label status={LabelStatus.success} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Success label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.warning}>Warning</Label>\n      <Label status={LabelStatus.warning} onClose={() => Function.prototype}>\n        Warning removable\n      </Label>\n      <Label status={LabelStatus.warning} href=\"#filled\">\n        Warning link\n      </Label>\n      <Label status={LabelStatus.warning} href=\"#filled\" onClose={() => Function.prototype}>\n        Warning link removable\n      </Label>\n      <Label status={LabelStatus.warning} onClick={() => logColor('warning')}>\n        Warning clickable\n      </Label>\n      <Label status={LabelStatus.warning} onClick={() => logColor('warning')} onClose={() => Function.prototype}>\n        Warning clickable removable\n      </Label>\n      <Label status={LabelStatus.warning} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Warning label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.danger}>Danger</Label>\n      <Label status={LabelStatus.danger} onClose={() => Function.prototype}>\n        Danger removable\n      </Label>\n      <Label status={LabelStatus.danger} href=\"#filled\">\n        Danger link\n      </Label>\n      <Label status={LabelStatus.danger} href=\"#filled\" onClose={() => Function.prototype}>\n        Danger link removable\n      </Label>\n      <Label status={LabelStatus.danger} onClick={() => logColor('danger')}>\n        Danger clickable\n      </Label>\n      <Label status={LabelStatus.danger} onClick={() => logColor('danger')} onClose={() => Function.prototype}>\n        Danger clickable removable\n      </Label>\n      <Label status={LabelStatus.danger} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Danger label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.info}>Info</Label>\n      <Label status={LabelStatus.info} onClose={() => Function.prototype}>\n        Info removable\n      </Label>\n      <Label status={LabelStatus.info} href=\"#filled\">\n        Info link\n      </Label>\n      <Label status={LabelStatus.info} href=\"#filled\" onClose={() => Function.prototype}>\n        Info link removable\n      </Label>\n      <Label status={LabelStatus.info} onClick={() => logColor('info')}>\n        Info clickable\n      </Label>\n      <Label status={LabelStatus.info} onClick={() => logColor('info')} onClose={() => Function.prototype}>\n        Info clickable removable\n      </Label>\n      <Label status={LabelStatus.info} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Info label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.custom}>Custom</Label>\n      <Label status={LabelStatus.custom} onClose={() => Function.prototype}>\n        Custom removable\n      </Label>\n      <Label status={LabelStatus.custom} href=\"#filled\">\n        Custom link\n      </Label>\n      <Label status={LabelStatus.custom} href=\"#filled\" onClose={() => Function.prototype}>\n        Custom link removable\n      </Label>\n      <Label status={LabelStatus.custom} onClick={() => logColor('custom')}>\n        Custom clickable\n      </Label>\n      <Label status={LabelStatus.custom} onClick={() => logColor('custom')} onClose={() => Function.prototype}>\n        Custom clickable removable\n      </Label>\n      <Label status={LabelStatus.custom} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Custom label with text that overflows\n      </Label>\n    </Fragment>\n  );\n};\n","title":"Filled labels","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Outlined labels': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Label, LabelColor, LabelStatus } from '@patternfly/react-core';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const LabelOutline: React.FunctionComponent = () => {\n  const logColor = (color: string) => {\n    // eslint-disable-next-line no-console\n    console.log(color, 'label clicked');\n  };\n  return (\n    <Fragment>\n      <strong>Non-status:</strong>\n      <br />\n      <br />\n      <Label variant=\"outline\">Grey</Label>\n      <Label variant=\"outline\" icon={<CubeIcon />}>\n        Grey icon\n      </Label>\n      <Label variant=\"outline\" onClose={() => Function.prototype}>\n        Grey removable\n      </Label>\n      <Label variant=\"outline\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Grey icon removable\n      </Label>\n      <Label variant=\"outline\" href=\"#outline\">\n        Grey link\n      </Label>\n      <Label variant=\"outline\" href=\"#outline\" onClose={() => Function.prototype}>\n        Grey link removable\n      </Label>{' '}\n      <Label variant=\"outline\" onClick={() => logColor('grey')}>\n        Grey clickable\n      </Label>\n      <Label variant=\"outline\" onClick={() => logColor('grey')} onClose={() => Function.prototype}>\n        Grey clickable removable\n      </Label>\n      <Label variant=\"outline\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Grey label with icon that overflows\n      </Label>{' '}\n      <Label variant=\"outline\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n        Grey link removable (disabled)\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('grey')}\n        onClose={() => Function.prototype}\n      >\n        Grey clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.blue}>\n        Blue\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.blue} icon={<CubeIcon />}>\n        Blue icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.blue} onClose={() => Function.prototype}>\n        Blue removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Blue icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.blue} href=\"#outline\">\n        Blue link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.blue} href=\"#outline\" onClose={() => Function.prototype}>\n        Blue link removable\n      </Label>{' '}\n      <Label variant=\"outline\" color={LabelColor.blue} onClick={() => logColor('blue')}>\n        Blue clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.blue}\n        onClick={() => logColor('blue')}\n        onClose={() => Function.prototype}\n      >\n        Blue clickable removable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.blue}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Blue label with icon that overflows\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.blue}\n        isDisabled\n        icon={<CubeIcon />}\n        href=\"#filled\"\n        onClose={() => Function.prototype}\n      >\n        Blue link removable (disabled)\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.blue}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('blue')}\n        onClose={() => Function.prototype}\n      >\n        Blue clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.green}>\n        Green\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.green} icon={<CubeIcon />}>\n        Green icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.green} onClose={() => Function.prototype}>\n        Green removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Green icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.green} href=\"#outline\">\n        Green link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.green} href=\"#outline\" onClose={() => Function.prototype}>\n        Green link removable\n      </Label>{' '}\n      <Label variant=\"outline\" color={LabelColor.green} onClick={() => logColor('green')}>\n        Green clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.green}\n        onClick={() => logColor('green')}\n        onClose={() => Function.prototype}\n      >\n        Green clickable removable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.green}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Green label with icon that overflows\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.green}\n        isDisabled\n        icon={<CubeIcon />}\n        href=\"#filled\"\n        onClose={() => Function.prototype}\n      >\n        Green link removable (disabled)\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.green}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('green')}\n        onClose={() => Function.prototype}\n      >\n        Green clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.orange}>\n        Orange\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orange} icon={<CubeIcon />}>\n        Orange icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orange} onClose={() => Function.prototype}>\n        Orange removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Orange icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orange} href=\"#outline\">\n        Orange link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orange} href=\"#outline\" onClose={() => Function.prototype}>\n        Orange link removable\n      </Label>{' '}\n      <Label variant=\"outline\" color={LabelColor.orange} onClick={() => logColor('orange')}>\n        Orange clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.orange}\n        onClick={() => logColor('orange')}\n        onClose={() => Function.prototype}\n      >\n        Orange clickable removable\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.orange}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Orange label with icon that overflows\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.orange}\n        isDisabled\n        icon={<CubeIcon />}\n        href=\"#filled\"\n        onClose={() => Function.prototype}\n      >\n        Orange link removable (disabled)\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.orange}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('orange')}\n        onClose={() => Function.prototype}\n      >\n        Orange clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.red}>\n        Red\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.red} icon={<CubeIcon />}>\n        Red icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.red} onClose={() => Function.prototype}>\n        Red removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Red icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.red} href=\"#outline\">\n        Red link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.red} href=\"#outline\" onClose={() => Function.prototype}>\n        Red link removable\n      </Label>{' '}\n      <Label variant=\"outline\" color={LabelColor.red} onClick={() => logColor('red')}>\n        Red clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.red}\n        onClick={() => logColor('red')}\n        onClose={() => Function.prototype}\n      >\n        Red clickable removable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.red}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Red label with icon that overflows\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.orangered}>\n        Orange red\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orangered} icon={<CubeIcon />}>\n        Orange red icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orangered} onClose={() => Function.prototype}>\n        Orange red removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Orange red icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orangered} href=\"#outline\">\n        Orange red link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orangered} href=\"#outline\" onClose={() => Function.prototype}>\n        Orange red link removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.orangered} onClick={() => logColor('orangered')}>\n        Orange red clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.orangered}\n        onClick={() => logColor('orangered')}\n        onClose={() => Function.prototype}\n      >\n        Orange red clickable removable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.orangered}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Orange red label with icon that overflows\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.purple}>\n        Purple\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.purple} icon={<CubeIcon />}>\n        Purple icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.purple} onClose={() => Function.prototype}>\n        Purple removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Purple icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.purple} href=\"#outline\">\n        Purple link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.purple} href=\"#outline\" onClose={() => Function.prototype}>\n        Purple link removable\n      </Label>{' '}\n      <Label variant=\"outline\" color={LabelColor.purple} onClick={() => logColor('purple')}>\n        Purple clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.purple}\n        onClick={() => logColor('purple')}\n        onClose={() => Function.prototype}\n      >\n        Purple clickable removable\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.purple}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Purple label with icon that overflows\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.purple}\n        isDisabled\n        icon={<CubeIcon />}\n        href=\"#filled\"\n        onClose={() => Function.prototype}\n      >\n        Purple link removable (disabled)\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.purple}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('purple')}\n        onClose={() => Function.prototype}\n      >\n        Purple clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.teal}>\n        Teal\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.teal} icon={<CubeIcon />}>\n        Teal icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.teal} onClose={() => Function.prototype}>\n        Teal removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Teal icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.teal} href=\"#outline\">\n        Teal link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.teal} href=\"#outline\" onClose={() => Function.prototype}>\n        Teal link removable\n      </Label>{' '}\n      <Label variant=\"outline\" color={LabelColor.teal} onClick={() => logColor('teal')}>\n        Teal clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.teal}\n        onClick={() => logColor('teal')}\n        onClose={() => Function.prototype}\n      >\n        Teal clickable removable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.teal}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Teal label with icon that overflows\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.teal}\n        isDisabled\n        icon={<CubeIcon />}\n        href=\"#filled\"\n        onClose={() => Function.prototype}\n      >\n        Teal link removable (disabled)\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.teal}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('teal')}\n        onClose={() => Function.prototype}\n      >\n        Teal clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <Label variant=\"outline\" color={LabelColor.yellow}>\n        Yellow\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.yellow} icon={<CubeIcon />}>\n        Yellow icon\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.yellow} onClose={() => Function.prototype}>\n        Yellow removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype}>\n        Yellow icon removable\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.yellow} href=\"#outline\">\n        Yellow link\n      </Label>\n      <Label variant=\"outline\" color={LabelColor.yellow} href=\"#outline\" onClose={() => Function.prototype}>\n        Yellow link removable\n      </Label>{' '}\n      <Label variant=\"outline\" color={LabelColor.yellow} onClick={() => logColor('yellow')}>\n        Yellow clickable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.yellow}\n        onClick={() => logColor('yellow')}\n        onClose={() => Function.prototype}\n      >\n        Yellow clickable removable\n      </Label>\n      <Label\n        variant=\"outline\"\n        color={LabelColor.yellow}\n        icon={<CubeIcon />}\n        onClose={() => Function.prototype}\n        textMaxWidth=\"16ch\"\n      >\n        Yellow label with icon that overflows\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.yellow}\n        isDisabled\n        icon={<CubeIcon />}\n        href=\"#filled\"\n        onClose={() => Function.prototype}\n      >\n        Yellow link removable (disabled)\n      </Label>{' '}\n      <Label\n        variant=\"outline\"\n        color={LabelColor.yellow}\n        isDisabled\n        icon={<CubeIcon />}\n        onClick={() => logColor('yellow')}\n        onClose={() => Function.prototype}\n      >\n        Yellow clickable removable (disabled)\n      </Label>\n      <br />\n      <br />\n      <strong>Status:</strong>\n      <br />\n      <br />\n      <Label status={LabelStatus.success} variant=\"outline\">\n        Success\n      </Label>\n      <Label status={LabelStatus.success} variant=\"outline\" onClose={() => Function.prototype}>\n        Success removable\n      </Label>\n      <Label status={LabelStatus.success} variant=\"outline\" href=\"#filled\">\n        Success link\n      </Label>\n      <Label status={LabelStatus.success} variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n        Success link removable\n      </Label>\n      <Label status={LabelStatus.success} variant=\"outline\" onClick={() => logColor('success')}>\n        Success clickable\n      </Label>\n      <Label\n        status={LabelStatus.success}\n        variant=\"outline\"\n        onClick={() => logColor('success')}\n        onClose={() => Function.prototype}\n      >\n        Success clickable removable\n      </Label>\n      <Label status={LabelStatus.success} variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Success label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.warning} variant=\"outline\">\n        Warning\n      </Label>\n      <Label status={LabelStatus.warning} variant=\"outline\" onClose={() => Function.prototype}>\n        Warning removable\n      </Label>\n      <Label status={LabelStatus.warning} variant=\"outline\" href=\"#filled\">\n        Warning link\n      </Label>\n      <Label status={LabelStatus.warning} variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n        Warning link removable\n      </Label>\n      <Label status={LabelStatus.warning} variant=\"outline\" onClick={() => logColor('warning')}>\n        Warning clickable\n      </Label>\n      <Label\n        status={LabelStatus.warning}\n        variant=\"outline\"\n        onClick={() => logColor('warning')}\n        onClose={() => Function.prototype}\n      >\n        Warning clickable removable\n      </Label>\n      <Label status={LabelStatus.warning} variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Warning label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.danger} variant=\"outline\">\n        Danger\n      </Label>\n      <Label status={LabelStatus.danger} variant=\"outline\" onClose={() => Function.prototype}>\n        Danger removable\n      </Label>\n      <Label status={LabelStatus.danger} variant=\"outline\" href=\"#filled\">\n        Danger link\n      </Label>\n      <Label status={LabelStatus.danger} variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n        Danger link removable\n      </Label>\n      <Label status={LabelStatus.danger} variant=\"outline\" onClick={() => logColor('danger')}>\n        Danger clickable\n      </Label>\n      <Label\n        status={LabelStatus.danger}\n        variant=\"outline\"\n        onClick={() => logColor('danger')}\n        onClose={() => Function.prototype}\n      >\n        Danger clickable removable\n      </Label>\n      <Label status={LabelStatus.danger} variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Danger label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.info} variant=\"outline\">\n        Info\n      </Label>\n      <Label status={LabelStatus.info} variant=\"outline\" onClose={() => Function.prototype}>\n        Info removable\n      </Label>\n      <Label status={LabelStatus.info} variant=\"outline\" href=\"#filled\">\n        Info link\n      </Label>\n      <Label status={LabelStatus.info} variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n        Info link removable\n      </Label>\n      <Label status={LabelStatus.info} variant=\"outline\" onClick={() => logColor('info')}>\n        Info clickable\n      </Label>\n      <Label\n        status={LabelStatus.info}\n        variant=\"outline\"\n        onClick={() => logColor('info')}\n        onClose={() => Function.prototype}\n      >\n        Info clickable removable\n      </Label>\n      <Label status={LabelStatus.info} variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Info label with text that overflows\n      </Label>\n      <br />\n      <br />\n      <Label status={LabelStatus.custom} variant=\"outline\">\n        Custom\n      </Label>\n      <Label status={LabelStatus.custom} variant=\"outline\" onClose={() => Function.prototype}>\n        Custom removable\n      </Label>\n      <Label status={LabelStatus.custom} variant=\"outline\" href=\"#filled\">\n        Custom link\n      </Label>\n      <Label status={LabelStatus.custom} variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n        Custom link removable\n      </Label>\n      <Label status={LabelStatus.custom} variant=\"outline\" onClick={() => logColor('custom')}>\n        Custom clickable\n      </Label>\n      <Label\n        status={LabelStatus.custom}\n        variant=\"outline\"\n        onClick={() => logColor('custom')}\n        onClose={() => Function.prototype}\n      >\n        Custom clickable removable\n      </Label>\n      <Label status={LabelStatus.custom} variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n        Custom label with text that overflows\n      </Label>\n    </Fragment>\n  );\n};\n","title":"Outlined labels","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Compact labels': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Label, LabelColor } from '@patternfly/react-core';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelCompact: React.FunctionComponent = () => (\n  <Fragment>\n    <Label isCompact>Compact</Label>\n    <Label isCompact icon={<CubeIcon />}>\n      Compact icon\n    </Label>\n    <Label isCompact onClose={() => Function.prototype}>\n      Compact removable\n    </Label>\n    <Label isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>\n      Compact icon removable\n    </Label>\n    <Label isCompact href=\"#compact\">\n      Compact link\n    </Label>\n    <Label isCompact href=\"#compact\" onClose={() => Function.prototype}>\n      Compact link removable\n    </Label>{' '}\n    <Label isCompact onClick={() => Function.prototype}>\n      Compact clickable\n    </Label>{' '}\n    <Label isCompact onClick={() => Function.prototype} onClose={() => Function.prototype}>\n      Compact clickable removable\n    </Label>{' '}\n    <Label isCompact icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n      Compact label with icon that overflows\n    </Label>{' '}\n    <Label isDisabled isCompact href=\"#compact\" onClose={() => Function.prototype} icon={<CubeIcon />}>\n      Compact link removable (disabled)\n    </Label>{' '}\n    <Label\n      isDisabled\n      isCompact\n      onClick={() => Function.prototype}\n      onClose={() => Function.prototype}\n      icon={<CubeIcon />}\n    >\n      Compact clickable removable (disabled)\n    </Label>\n    <Label variant=\"outline\" color={LabelColor.blue} isCompact icon={<CubeIcon />}>\n      Compact icon\n    </Label>\n    <Label variant=\"outline\" color={LabelColor.blue} isCompact onClose={() => Function.prototype}>\n      Compact removable\n    </Label>\n    <Label variant=\"outline\" color={LabelColor.blue} isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>\n      Compact icon removable\n    </Label>\n    <Label variant=\"outline\" color={LabelColor.blue} isCompact href=\"#compact\">\n      Compact link\n    </Label>\n    <Label variant=\"outline\" color={LabelColor.blue} isCompact href=\"#compact\" onClose={() => Function.prototype}>\n      Compact link removable\n    </Label>\n    <Label\n      variant=\"outline\"\n      color={LabelColor.blue}\n      isCompact\n      icon={<CubeIcon />}\n      onClose={() => Function.prototype}\n      textMaxWidth=\"16ch\"\n    >\n      Compact label with icon that overflows\n    </Label>{' '}\n    <Label isDisabled isCompact href=\"#compact\" onClose={() => Function.prototype} icon={<RhUiInformationFillIcon />}>\n      Compact link removable (disabled)\n    </Label>{' '}\n    <Label\n      isDisabled\n      isCompact\n      onClick={() => Function.prototype}\n      onClose={() => Function.prototype}\n      icon={<RhUiInformationFillIcon />}\n    >\n      Compact clickable removable (disabled)\n    </Label>\n  </Fragment>\n);\n","title":"Compact labels","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Label with custom render': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Label, LabelColor } from '@patternfly/react-core';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelCustomRender: React.FunctionComponent = () => (\n  <Label\n    color={LabelColor.blue}\n    icon={<RhUiInformationFillIcon />}\n    onClose={() => Function.prototype}\n    render={({ className, content, componentRef }) => (\n      <a className={className} ref={componentRef}>\n        {content}\n      </a>\n    )}\n    textMaxWidth=\"16ch\"\n    isClickable\n  >\n    Blue label router link with icon that overflows\n  </Label>\n);\n","title":"Label with custom render","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Labels may be passed a custom renderer to display customized content or for use with router components. When using a custom render, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isClickable`}
+        </code>
+        {` may also be passed to remove the underline text decoration of anchors or router links.`}
+      </p>
+    </Example>,
+  'Editable labels': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Label, LabelColor } from '@patternfly/react-core';\n\nexport const LabelEditable: React.FunctionComponent = () => {\n  const [labelText, setLabelText] = useState('Editable label');\n  const [compactLabelText, setCompactLabelText] = useState('Compact editable label');\n\n  const onEditCancel = (_event: KeyboardEvent, prevText: string) => {\n    setLabelText(prevText);\n  };\n\n  const onEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {\n    setLabelText(text);\n  };\n\n  const onCompactEditCancel = (_event: KeyboardEvent, prevText: string) => {\n    setCompactLabelText(prevText);\n  };\n\n  const onCompactEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {\n    setCompactLabelText(text);\n  };\n\n  return (\n    <Fragment>\n      <Label\n        color={LabelColor.blue}\n        onClose={() => {}}\n        closeBtnAriaLabel=\"Custom close button for editable label\"\n        onEditCancel={onEditCancel}\n        onEditComplete={onEditComplete}\n        isEditable\n        editableProps={{\n          'aria-label': `Editable label with text ${labelText}`,\n          id: 'editable-label'\n        }}\n      >\n        {labelText}\n      </Label>\n      <Label\n        color={LabelColor.grey}\n        isCompact\n        onClose={() => {}}\n        closeBtnAriaLabel=\"Custom close button for compact editable label\"\n        onEditCancel={onCompactEditCancel}\n        onEditComplete={onCompactEditComplete}\n        isEditable\n        editableProps={{\n          'aria-label': `Editable compact label with text ${compactLabelText}`,\n          id: 'compact-editable-label'\n        }}\n      >\n        {compactLabelText}\n      </Label>\n    </Fragment>\n  );\n};\n","title":"Editable labels","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can also customize any Label's close button aria-label as this example shows with `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`closeBtnAriaLabel`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Basic label group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelGroupBasic: React.FunctionComponent = () => (\n  <LabelGroup>\n    <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>\n      Label 2\n    </Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>\n      Label 3\n    </Label>\n  </LabelGroup>\n);\n","title":"Basic label group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use a label group when you have multiple labels to display at once.`}
+      </p>
+    </Example>,
+  'Label group with overflow': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelGroupOverflow: React.FunctionComponent = () => (\n  <LabelGroup>\n    <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>\n      Label 2\n    </Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>\n      Label 3\n    </Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.orange}>\n      Label 4\n    </Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.red}>\n      Label 5\n    </Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.purple}>\n      Label 6\n    </Label>\n  </LabelGroup>\n);\n","title":"Label group with overflow","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.`}
+      </p>
+    </Example>,
+  'Label group with categories': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelGroupCategory: React.FunctionComponent = () => (\n  <LabelGroup categoryName=\"Group label\">\n    <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>\n      Label 2\n    </Label>\n    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>\n      Label 3\n    </Label>\n  </LabelGroup>\n);\n","title":"Label group with categories","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use a category name to organize a set of labels`}
+      </p>
+    </Example>,
+  'Label group with removable categories': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Label, LabelColor, LabelGroup } from '@patternfly/react-core';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelGroupCategoryRemovable: React.FunctionComponent = () => {\n  const [labels, setLabels] = useState([\n    ['Label 1', 'grey'],\n    ['Label 2', 'blue'],\n    ['Label 3', 'green'],\n    ['Label 4', 'orange'],\n    ['Label 5', 'red']\n  ]);\n  const deleteCategory = () => setLabels([]);\n\n  return (\n    <LabelGroup categoryName=\"Group label\" isClosable onClick={deleteCategory}>\n      {labels.map(([labelText, labelColor]) => (\n        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelColor} key={labelText}>\n          {labelText}\n        </Label>\n      ))}\n    </LabelGroup>\n  );\n};\n","title":"Label group with removable categories","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Vertical label group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Label, LabelColor, LabelGroup } from '@patternfly/react-core';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {\n  const [labels, setLabels] = useState([\n    ['Label 1', 'grey'],\n    ['Label 2', 'blue'],\n    ['Label 3', 'green'],\n    ['Label 4', 'orange'],\n    ['Label 5', 'red']\n  ]);\n  const deleteCategory = () => setLabels([]);\n\n  return (\n    <LabelGroup categoryName=\"Group label with a very long name\" isVertical isClosable onClick={deleteCategory}>\n      {labels.map(([labelText, labelColor]) => (\n        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelColor} key={labelText}>\n          {labelText}\n        </Label>\n      ))}\n    </LabelGroup>\n  );\n};\n","title":"Vertical label group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.`}
+      </p>
+    </Example>,
+  'Editable label group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { LabelGroup, Label, LabelColor } from '@patternfly/react-core';\n\nexport const LabelGroupEditableLabels: React.FunctionComponent = () => {\n  const [label1, setLabel1] = useState('Editable label');\n  const [label2, setLabel2] = useState('Editable label 2');\n  const [label3, setLabel3] = useState('Editable label 3');\n\n  return (\n    <LabelGroup numLabels={5} isEditable>\n      <Label\n        color={LabelColor.blue}\n        onClose={() => Function.prototype}\n        onEditCancel={(_event, prevText) => setLabel1(prevText)}\n        onEditComplete={(_event, newText) => setLabel1(newText)}\n        isEditable\n        editableProps={{\n          'aria-label': `Editable label with text ${label1}`,\n          id: 'editable-label-1'\n        }}\n      >\n        {label1}\n      </Label>\n      <Label color={LabelColor.green}>Static label</Label>\n      <Label\n        color={LabelColor.blue}\n        onClose={() => Function.prototype}\n        onEditCancel={(_event, prevText) => setLabel2(prevText)}\n        onEditComplete={(_event, newText) => setLabel2(newText)}\n        isEditable\n        editableProps={{\n          'aria-label': `Editable label with text ${label2}`,\n          id: 'editable-label-2'\n        }}\n      >\n        {label2}\n      </Label>\n      <Label\n        color={LabelColor.blue}\n        onClose={() => Function.prototype}\n        onEditCancel={(_event, prevText) => setLabel3(prevText)}\n        onEditComplete={(_event, newText) => setLabel3(newText)}\n        isEditable\n        editableProps={{\n          'aria-label': `Editable label with text ${label3}`,\n          id: 'editable-label-3'\n        }}\n      >\n        {label3}\n      </Label>\n    </LabelGroup>\n  );\n};\n","title":"Editable label group","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Editable label group with add button': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { LabelGroup, Label, LabelColor } from '@patternfly/react-core';\n\nexport const LabelGroupEditableAdd: React.FunctionComponent = () => {\n  const [idIndex, setIdIndex] = useState<number>(3);\n  const [labels, setLabels] = useState<any>([\n    { name: 'Label 1', id: 0 },\n    { name: 'Label 2', id: 1 },\n    {\n      name: 'Label 3',\n      props: {\n        isEditable: true,\n        editableProps: {\n          'aria-label': 'Editable label with text Label 3'\n        }\n      },\n      id: 2\n    }\n  ]);\n\n  const onClose = (labelId: string) => {\n    setLabels(labels.filter((l: any) => l.id !== labelId));\n  };\n\n  const onEdit = (nextText: string, index: number) => {\n    const copy = [...labels];\n    const updatedProps = {\n      ...labels[index].props,\n      editableProps: { 'aria-label': `Editable label with text ${nextText}` }\n    };\n\n    copy[index] = { name: nextText, props: updatedProps, id: labels[index].id };\n    setLabels(copy);\n  };\n\n  const onAdd = () => {\n    setLabels([\n      {\n        name: 'New Label',\n        props: {\n          isEditable: true,\n          editableProps: {\n            'aria-label': `Editable label with text New Label`\n          }\n        },\n        id: idIndex\n      },\n      ...labels\n    ]);\n    setIdIndex(idIndex + 1);\n  };\n\n  return (\n    <LabelGroup\n      categoryName=\"Label group 1\"\n      numLabels={5}\n      isEditable\n      addLabelControl={\n        <Label variant=\"add\" onClick={onAdd}>\n          Add label\n        </Label>\n      }\n    >\n      {labels.map((label, index) => (\n        <Label\n          key={label.id}\n          id={label.id}\n          color={LabelColor.blue}\n          onClose={() => onClose(label.id)}\n          onEditCancel={(_event, prevText) => onEdit(prevText, index)}\n          onEditComplete={(_event, newText) => onEdit(newText, index)}\n          {...label.props}\n        >\n          {label.name}\n        </Label>\n      ))}\n    </LabelGroup>\n  );\n};\n","title":"Editable label group with add button","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see `}
+        
+        <PatternflyThemeLink {...{"to":"/components/label/react-demos","className":""}}>
+          {`label demos`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Filled labels"])}
+    {React.createElement(pageData.examples["Outlined labels"])}
+    {React.createElement(pageData.examples["Compact labels"])}
+    {React.createElement(pageData.examples["Label with custom render"])}
+    {React.createElement(pageData.examples["Editable labels"])}
+    {React.createElement(pageData.examples["Basic label group"])}
+    {React.createElement(pageData.examples["Label group with overflow"])}
+    {React.createElement(pageData.examples["Label group with categories"])}
+    {React.createElement(pageData.examples["Label group with removable categories"])}
+    {React.createElement(pageData.examples["Vertical label group"])}
+    {React.createElement(pageData.examples["Editable label group"])}
+    {React.createElement(pageData.examples["Editable label group with add button"])}
+    <AutoLinkHeader {...{"id":"using-router-links","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Using router links`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Router links can be used for in-app linking in React environments to prevent page reloading. To use a `}
+      <code {...{"className":"ws-code "}}>
+        {`Link`}
+      </code>
+      {` component from a router package, you can use the `}
+      <code {...{"className":"ws-code "}}>
+        {`render`}
+      </code>
+      {` property of the `}
+      <code {...{"className":"ws-code "}}>
+        {`Label`}
+      </code>
+      {`:`}
+    </p>
+    <Example {...{"code":"<Label\n  render={({ className, content, componentRef }) => (\n    <Link to=\"/\" className={className} innerRef={componentRef}>\n      {content}\n    </Link>\n  )}\n>\n  Label router link\n</Label>","lang":"nolive","className":""}}>
+    </Example>
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsLabelReactDocs';
+Component.pageData = pageData;
+
+export default Component;