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

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

@@ -1,826 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useState } from 'react';
-import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
-import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
-import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-const pageData = {
-  "id": "Button",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/button/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Button/examples/Button.md",
-  "relPath": "packages/react-core/src/components/Button/examples/Button.md",
-  "propComponents": [
-    {
-      "name": "Button",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds accessible text to the button."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the button"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the button"
-        },
-        {
-          "name": "component",
-          "type": "React.ElementType<any> | React.ComponentType<any>",
-          "description": "Sets the base component to render. defaults to button"
-        },
-        {
-          "name": "countOptions",
-          "type": "BadgeCountObject",
-          "description": "Adds count number to button"
-        },
-        {
-          "name": "hamburgerVariant",
-          "type": "'expand' | 'collapse'",
-          "description": "Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button."
-        },
-        {
-          "name": "hasNoPadding",
-          "type": "boolean",
-          "description": "Applies no padding on a plain button variant. Use when plain button is placed inline with text"
-        },
-        {
-          "name": "icon",
-          "type": "React.ReactNode | null",
-          "description": "Icon for the button."
-        },
-        {
-          "name": "iconPosition",
-          "type": "'start' | 'end' | 'left' | 'right'",
-          "description": "Sets position of the icon. Note: \"left\" and \"right\" are deprecated. Use \"start\" and \"end\" instead"
-        },
-        {
-          "name": "inoperableEvents",
-          "type": "string[]",
-          "description": "Events to prevent when the button is in an aria-disabled state"
-        },
-        {
-          "name": "isAriaDisabled",
-          "type": "boolean",
-          "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute"
-        },
-        {
-          "name": "isBlock",
-          "type": "boolean",
-          "description": "Adds block styling to button"
-        },
-        {
-          "name": "isCircle",
-          "type": "boolean",
-          "description": "Flag indicating the button is a circle button. Intended for buttons that only contain an icon..",
-          "beta": true
-        },
-        {
-          "name": "isClicked",
-          "type": "boolean",
-          "description": "Adds clicked styling to button."
-        },
-        {
-          "name": "isDanger",
-          "type": "boolean",
-          "description": "Adds danger styling to secondary or link button variants"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Adds disabled styling and disables the button using the disabled html attribute"
-        },
-        {
-          "name": "isDocked",
-          "type": "boolean",
-          "description": "Flag indicating the button is a docked variant button. For use in docked navigation.",
-          "beta": true
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true."
-        },
-        {
-          "name": "isFavorite",
-          "type": "boolean",
-          "description": "Adds favorite styling to a button"
-        },
-        {
-          "name": "isFavorited",
-          "type": "boolean",
-          "description": "Flag indicating whether the button is favorited or not, only when isFavorite is true."
-        },
-        {
-          "name": "isHamburger",
-          "type": "boolean",
-          "description": "Flag indicating the button is a hamburger button. This will override the icon property."
-        },
-        {
-          "name": "isInline",
-          "type": "boolean",
-          "description": "Adds inline styling to a link button"
-        },
-        {
-          "name": "isLoading",
-          "type": "boolean",
-          "description": "Adds progress styling to button"
-        },
-        {
-          "name": "isSettings",
-          "type": "boolean",
-          "description": "Flag indicating the button is a settings button. This will override the icon property."
-        },
-        {
-          "name": "isTextExpanded",
-          "type": "boolean",
-          "description": "Flag indicating the docked button should display text. Only applies when isDocked is true.",
-          "beta": true
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
-        },
-        {
-          "name": "size",
-          "type": "'default' | 'sm' | 'lg'",
-          "description": "Adds styling which affects the size of the button"
-        },
-        {
-          "name": "spinnerAriaLabel",
-          "type": "string",
-          "description": "Accessible label for the spinner to describe what is loading"
-        },
-        {
-          "name": "spinnerAriaLabelledBy",
-          "type": "string",
-          "description": "Id of element which describes what is being loaded"
-        },
-        {
-          "name": "spinnerAriaValueText",
-          "type": "string",
-          "description": "Text describing that current loading status or progress"
-        },
-        {
-          "name": "state",
-          "type": "'read' | 'unread' | 'attention'",
-          "description": "Sets state of the stateful button variant. Default is \"unread\""
-        },
-        {
-          "name": "tabIndex",
-          "type": "number",
-          "description": "Sets the button tabindex."
-        },
-        {
-          "name": "type",
-          "type": "'button' | 'submit' | 'reset'",
-          "description": "Sets button type"
-        },
-        {
-          "name": "variant",
-          "type": "'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control' | 'stateful'",
-          "description": "Adds button variant styles"
-        }
-      ]
-    },
-    {
-      "name": "BadgeCountObject",
-      "description": "",
-      "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the badge count"
-        },
-        {
-          "name": "count",
-          "type": "number",
-          "description": "Adds count number right of button"
-        },
-        {
-          "name": "isRead",
-          "type": "boolean",
-          "description": "Adds styling to the badge to indicate it has been read"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-button"
-  ],
-  "examples": [
-    "Variant examples",
-    "Disabled buttons",
-    "Small buttons",
-    "Call to action (CTA) buttons",
-    "Block level buttons",
-    "Progress indicators",
-    "Links as buttons",
-    "Inline link as span",
-    "Custom component",
-    "Aria-disabled examples",
-    "Button with count",
-    "Plain with no padding",
-    "Stateful",
-    "Circle buttons",
-    "Favorite",
-    "Settings",
-    "Hamburger"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useState,
-  RhMicronsCloseIcon,
-  RhUiExternalLinkFillIcon,
-  RhUiAddCircleFillIcon,
-  RhUiCopyFillIcon,
-  RhMicronsCaretRightIcon,
-  UploadIcon,
-  RhUiNotificationFillIcon,
-  RhUiQuestionMarkCircleFillIcon
-};
-pageData.examples = {
-  'Variant examples': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\nimport RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\nimport RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const ButtonVariations: React.FunctionComponent = () => (\n  <>\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button variant=\"primary\" ouiaId=\"Primary\">\n        Primary\n      </Button>\n      <Button variant=\"secondary\" ouiaId=\"Secondary\">\n        Secondary\n      </Button>\n      <Button variant=\"secondary\" ouiaId=\"DangerSecondary\" isDanger>\n        Danger Secondary\n      </Button>\n      <Button variant=\"tertiary\" ouiaId=\"Tertiary\">\n        Tertiary\n      </Button>\n      <Button variant=\"danger\" ouiaId=\"Danger\">\n        Danger\n      </Button>\n      <Button variant=\"warning\" ouiaId=\"Warning\">\n        Warning\n      </Button>\n    </Flex>\n    <br />\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button variant=\"link\" icon={<RhUiAddCircleFillIcon />}>\n        Link\n      </Button>\n      <Button variant=\"link\" icon={<RhUiExternalLinkFillIcon />} iconPosition=\"end\">\n        Link\n      </Button>\n      <Button variant=\"link\" isInline>\n        Inline link\n      </Button>\n      <Button variant=\"link\" isDanger>\n        Danger link\n      </Button>\n      <Button variant=\"plain\" aria-label=\"Action\" icon={<RhMicronsCloseIcon />} />\n    </Flex>\n    <br />\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button variant=\"control\">Control</Button>\n      <Button variant=\"control\" aria-label=\"Copy\" icon={<RhUiCopyFillIcon />} />\n    </Flex>\n    <br />\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button variant=\"stateful\" icon={<RhUiNotificationFillIcon />} state=\"read\">\n        Stateful read\n      </Button>\n      <Button variant=\"stateful\" icon={<RhUiNotificationFillIcon />} state=\"unread\">\n        Stateful unread\n      </Button>\n      <Button variant=\"stateful\" icon={<RhUiNotificationFillIcon />} state=\"attention\">\n        Stateful attention\n      </Button>\n    </Flex>\n  </>\n);\n","title":"Variant examples","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant`}
-        </code>
-        {` property.`}
-      </p>
-    </Example>,
-  'Disabled buttons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\nimport RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';\n\nexport const ButtonDisabled: React.FunctionComponent = () => (\n  <>\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button isDisabled>Primary</Button>\n      <Button variant=\"secondary\" isDisabled>\n        Secondary\n      </Button>\n      <Button variant=\"secondary\" isDanger isDisabled>\n        Danger secondary\n      </Button>\n      <Button isDisabled variant=\"tertiary\">\n        Tertiary\n      </Button>\n      <Button isDisabled variant=\"danger\">\n        Danger\n      </Button>\n      <Button isDisabled variant=\"warning\">\n        Warning\n      </Button>\n    </Flex>\n    <br />\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button isDisabled variant=\"link\" icon={<RhUiAddCircleFillIcon />}>\n        Link\n      </Button>\n      <Button isDisabled variant=\"link\" isInline>\n        Inline link\n      </Button>\n      <Button variant=\"link\" isDanger isDisabled>\n        Danger link\n      </Button>\n      <Button isDisabled variant=\"plain\" aria-label=\"Action\" icon={<RhMicronsCloseIcon />} />\n    </Flex>\n    <br />\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button isDisabled variant=\"control\">\n        Control\n      </Button>\n      <Button isDisabled variant=\"control\" aria-label=\"Copy\" icon={<RhUiCopyFillIcon />} />\n    </Flex>\n  </>\n);\n","title":"Disabled buttons","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To indicate that an action is currently unavailable, all button variations can be disabled using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isDisabled`}
-        </code>
-        {` property.`}
-      </p>
-    </Example>,
-  'Small buttons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\n\nexport const ButtonSmall: React.FunctionComponent = () => (\n  <Flex columnGap={{ default: 'columnGapSm' }}>\n    <Button variant=\"primary\" size=\"sm\">\n      Primary\n    </Button>\n    <Button variant=\"secondary\" size=\"sm\">\n      Secondary\n    </Button>\n    <Button variant=\"tertiary\" size=\"sm\">\n      Tertiary\n    </Button>\n    <Button variant=\"danger\" size=\"sm\">\n      Danger\n    </Button>\n    <Button variant=\"warning\" size=\"sm\">\n      Warning\n    </Button>\n  </Flex>\n);\n","title":"Small buttons","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`"sm"`}
-        </code>
-        {` value for the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`size`}
-        </code>
-        {` property.`}
-      </p>
-    </Example>,
-  'Call to action (CTA) buttons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\nimport RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';\n\nexport const ButtonCallToAction: React.FunctionComponent = () => (\n  <Flex columnGap={{ default: 'columnGapSm' }}>\n    <Button variant=\"primary\" size=\"lg\">\n      Call to action\n    </Button>\n    <Button variant=\"secondary\" size=\"lg\">\n      Call to action\n    </Button>\n    <Button variant=\"tertiary\" size=\"lg\">\n      Call to action\n    </Button>\n    <Button variant=\"link\" size=\"lg\" icon={<RhMicronsCaretRightIcon />} iconPosition=\"end\">\n      Call to action\n    </Button>\n  </Flex>\n);\n","title":"Call to action (CTA) buttons","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`"lg"`}
-        </code>
-        {` value for the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`size`}
-        </code>
-        {` property.`}
-      </p>
-    </Example>,
-  'Block level buttons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button } from '@patternfly/react-core';\n\nexport const ButtonBlock: React.FunctionComponent = () => <Button isBlock>Block level button</Button>;\n","title":"Block level buttons","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Block level buttons span the full width of the parent element and can be enabled using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isBlock`}
-        </code>
-        {` property.`}
-      </p>
-    </Example>,
-  'Progress indicators': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Button, Flex } from '@patternfly/react-core';\nimport UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';\n\ninterface LoadingPropsType {\n  spinnerAriaValueText: string;\n  spinnerAriaLabelledBy?: string;\n  spinnerAriaLabel?: string;\n  isLoading: boolean;\n}\n\nexport const ButtonProgress: React.FunctionComponent = () => {\n  const [isPrimaryLoading, setIsPrimaryLoading] = useState<boolean>(true);\n  const [isSecondaryLoading, setIsSecondaryLoading] = useState<boolean>(true);\n  const [isInlineLoading, setIsInlineLoading] = useState<boolean>(true);\n  const [isUploading, setIsUploading] = useState<boolean>(false);\n\n  const primaryLoadingProps = {} as LoadingPropsType;\n  primaryLoadingProps.spinnerAriaValueText = 'Loading';\n  primaryLoadingProps.spinnerAriaLabelledBy = 'primary-loading-button';\n  primaryLoadingProps.isLoading = isPrimaryLoading;\n\n  const secondaryLoadingProps = {} as LoadingPropsType;\n  secondaryLoadingProps.spinnerAriaValueText = 'Loading';\n  secondaryLoadingProps.spinnerAriaLabel = 'Content being loaded';\n  secondaryLoadingProps.isLoading = isSecondaryLoading;\n\n  const inlineLoadingProps = {} as LoadingPropsType;\n  inlineLoadingProps.spinnerAriaValueText = 'Loading';\n  inlineLoadingProps.spinnerAriaLabel = 'Content being loaded';\n  inlineLoadingProps.isLoading = isInlineLoading;\n\n  const uploadingProps = {} as LoadingPropsType;\n  uploadingProps.spinnerAriaValueText = 'Loading';\n  uploadingProps.spinnerAriaLabel = 'Uploading data';\n  uploadingProps.isLoading = isUploading;\n\n  return (\n    <>\n      <Flex columnGap={{ default: 'columnGapSm' }}>\n        <Button\n          variant=\"primary\"\n          id=\"primary-loading-button\"\n          onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}\n          {...primaryLoadingProps}\n        >\n          {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => setIsSecondaryLoading(!isSecondaryLoading)}\n          {...secondaryLoadingProps}\n        >\n          {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}\n        </Button>\n      </Flex>\n      <br />\n      <Button\n        variant=\"plain\"\n        {...(!isUploading && { 'aria-label': 'Upload' })}\n        onClick={() => setIsUploading(!isUploading)}\n        icon={<UploadIcon />}\n        {...uploadingProps}\n      />\n      <br />\n      <br />\n      <Button variant=\"link\" isInline onClick={() => setIsInlineLoading(!isInlineLoading)} {...inlineLoadingProps}>\n        {isInlineLoading ? 'Pause loading logs' : 'Resume loading logs'}\n      </Button>\n    </>\n  );\n};\n","title":"Progress indicators","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Progress indicators can be added to buttons to identify that an action is in progress after a click.`}
-      </p>
-    </Example>,
-  'Links as buttons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\n\nexport const ButtonLinks: React.FunctionComponent = () => (\n  <Flex>\n    <Button component=\"a\" href=\"https://www.patternfly.org/\" target=\"_blank\" variant=\"primary\">\n      Link to PatternFly home\n    </Button>\n    <Button component=\"a\" href=\"https://www.patternfly.org/\" target=\"_blank\" variant=\"secondary\">\n      Secondary link to PatternFly home\n    </Button>\n    <Button isDisabled component=\"a\" href=\"https://www.patternfly.org/\" target=\"_blank\" variant=\"tertiary\">\n      Tertiary link to PatternFly home\n    </Button>\n    <Button component=\"a\" href=\"https://www.patternfly.org/\" variant=\"link\">\n      Jump to PatternFly home\n    </Button>\n  </Flex>\n);\n","title":"Links as buttons","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`component="a"`}
-        </code>
-        {` and an `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`href`}
-        </code>
-        {` property to designate the button's target link.`}
-      </p>
-    </Example>,
-  'Inline link as span': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Button, KeyTypes } from '@patternfly/react-core';\n\nconst handleKeydown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n  const { key } = event;\n  const isEnterKey: boolean = key === KeyTypes.Enter;\n  const isEnterOrSpaceKey: boolean = isEnterKey || key === KeyTypes.Space;\n\n  if (isEnterOrSpaceKey) {\n    event.preventDefault();\n    alert(`${isEnterKey ? 'Enter' : 'Space'} key default behavior stopped by onKeyDown`);\n  }\n};\n\nexport const ButtonInlineSpanLink: React.FunctionComponent = () => (\n  <Fragment>\n    <p>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      <Button variant=\"link\" isInline component=\"span\">\n        This is long button text that needs to be a span so that it will wrap inline with the text around it.\n      </Button>\n      Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.\n    </p>\n\n    <br />\n\n    <p>\n      Note that using a <b>span</b> as a button does not fire the <b>onclick</b> event for Enter or Space keys.\n      <Button variant=\"link\" isInline component=\"span\" onKeyDown={handleKeydown}>\n        An <b>onKeyDown</b> event listener is needed for Enter and Space key presses to prevent their default behavior\n        and trigger your code.\n      </Button>\n      Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.\n    </p>\n  </Fragment>\n);\n","title":"Inline link as span","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Inline links should use `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`component="span"`}
-        </code>
-        {` and the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isInline`}
-        </code>
-        {` property to wrap inline with surrounding text.`}
-      </p>
-    </Example>,
-  'Custom component': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button } from '@patternfly/react-core';\n\nexport const ButtonCustomComponent: React.FunctionComponent = () => (\n  <Button variant=\"link\" component={(props: any) => <a {...props} href=\"#\" />}>\n    Router link\n  </Button>\n);\n","title":"Custom component","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`In addition to being able to pass a string to the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`component`}
-        </code>
-        {` property, you can provide more fine-tuned customization by passing a callback that returns a component.`}
-      </p>
-    </Example>,
-  'Aria-disabled examples': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex, Tooltip } from '@patternfly/react-core';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\n\nexport const ButtonAriaDisabled: React.FunctionComponent = () => (\n  <>\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button isAriaDisabled>Primary aria disabled</Button>\n      <Button isAriaDisabled variant=\"link\" icon={<RhUiAddCircleFillIcon />}>\n        Link aria disabled\n      </Button>\n      <Button isAriaDisabled variant=\"link\" isInline>\n        Inline link aria disabled\n      </Button>\n    </Flex>\n    <br />\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Tooltip content=\"Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.\">\n        <Button isAriaDisabled>Primary button with tooltip</Button>\n      </Tooltip>\n      <Tooltip content=\"Aria-disabled link as button with tooltip\">\n        <Button component=\"a\" isAriaDisabled href=\"https://www.patternfly.org/\" target=\"_blank\" variant=\"secondary\">\n          Secondary link as button to PatternFly home\n        </Button>\n      </Tooltip>\n    </Flex>\n  </>\n);\n","title":"Aria-disabled examples","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        
-        <PatternflyThemeLink {...{"to":"https://www.w3.org/WAI/standards-guidelines/aria/","className":""}}>
-          {`Accessible Rich Internet Applications (ARIA)`}
-        </PatternflyThemeLink>
-        {` is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isAriaDisabled`}
-        </code>
-        {` property.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.`}
-      </p>
-    </Example>,
-  'Button with count': props => 
-    <Example {...pageData} {...props} {...{"code":"import { BadgeCountObject, Button, Flex } from '@patternfly/react-core';\n\nexport const ButtonWithCount: React.FunctionComponent = () => {\n  const badgeCountObjectNotRead: BadgeCountObject = {\n    isRead: false,\n    count: 7,\n    className: 'custom-badge-unread'\n  };\n\n  const badgeCountObjectRead: BadgeCountObject = {\n    isRead: true,\n    count: 10,\n    className: 'custom-badge-read'\n  };\n\n  return (\n    <>\n      <div>Unread:</div>\n      <Flex columnGap={{ default: 'columnGapSm' }}>\n        <Button variant=\"primary\" countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"secondary\" countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"tertiary\" countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"control\" countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"link\" countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n      </Flex>\n      <br />\n      <div>Unread disabled:</div>\n      <Flex columnGap={{ default: 'columnGapSm' }}>\n        <Button variant=\"primary\" isDisabled countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"secondary\" isDisabled countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"tertiary\" isDisabled countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"control\" isDisabled countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n        <Button variant=\"link\" isDisabled countOptions={badgeCountObjectNotRead}>\n          Issues\n        </Button>\n      </Flex>\n      <br />\n      <div>Read:</div>\n      <Flex columnGap={{ default: 'columnGapSm' }}>\n        <Button variant=\"primary\" countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"secondary\" countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"tertiary\" countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"control\" countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"link\" countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n      </Flex>\n      <br />\n      <div>Read disabled:</div>\n      <Flex columnGap={{ default: 'columnGapSm' }}>\n        <Button variant=\"primary\" isDisabled countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"secondary\" isDisabled countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"tertiary\" isDisabled countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"control\" isDisabled countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n        <Button variant=\"link\" isDisabled countOptions={badgeCountObjectRead}>\n          Issues\n        </Button>\n      </Flex>\n    </>\n  );\n};\n","title":"Button with count","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Buttons can display a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`count`}
-        </code>
-        {` in the form of a badge to indicate some value or number by passing in the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`countOptions`}
-        </code>
-        {` prop as a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`BadgeCountObject`}
-        </code>
-        {` object. The `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`BadgeCountObject`}
-        </code>
-        {` object will handle `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`count`}
-        </code>
-        {`, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isRead`}
-        </code>
-        {`, and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`className`}
-        </code>
-        {` props for the badge count.`}
-      </p>
-    </Example>,
-  'Plain with no padding': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button } from '@patternfly/react-core';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\n\nexport const ButtonPlainHasNoPadding: React.FunctionComponent = () => (\n  <p>\n    This is an example of a button\n    <Button variant=\"plain\" hasNoPadding aria-label=\"More info\" icon={<RhUiQuestionMarkCircleFillIcon />} />\n    which is placed inline with text\n  </p>\n);\n","title":"Plain with no padding","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To display a plain/icon button inline with text, use `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`noPadding`}
-        </code>
-        {` prop in addition to `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant="plain"`}
-        </code>
-        {`.`}
-      </p>
-    </Example>,
-  'Stateful': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const ButtonStateful: React.FunctionComponent = () => (\n  <Flex>\n    <div>\n      <div>\n        <strong>Read</strong>\n      </div>\n      <Button variant=\"stateful\" state=\"read\" icon={<RhUiNotificationFillIcon />}>\n        10 <span className=\"pf-v6-screen-reader\">items</span>\n      </Button>\n    </div>\n    <div>\n      <div>\n        <strong>Unread</strong>\n      </div>\n      <Button variant=\"stateful\" state=\"unread\" icon={<RhUiNotificationFillIcon />}>\n        10 <span className=\"pf-v6-screen-reader\">unread items</span>\n      </Button>\n    </div>\n    <div>\n      <div>\n        <strong>Attention</strong>\n      </div>\n      <Button variant=\"stateful\" state=\"attention\" icon={<RhUiNotificationFillIcon />}>\n        10 <span className=\"pf-v6-screen-reader\">unread items, needs attention</span>\n      </Button>\n    </div>\n  </Flex>\n);\n","title":"Stateful","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Stateful buttons are ideal for displaying the state of notifications. Use `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant="stateful"`}
-        </code>
-        {` alongside with the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`state`}
-        </code>
-        {` property, which can have these 3 values: `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`read`}
-        </code>
-        {`, `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`unread`}
-        </code>
-        {` (used as default) and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`attention`}
-        </code>
-        {` (which means unread and requires attention).`}
-      </p>
-    </Example>,
-  'Circle buttons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\nimport RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';\nimport RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\nimport UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';\n\ninterface LoadingPropsType {\n  spinnerAriaValueText: string;\n  spinnerAriaLabelledBy?: string;\n  spinnerAriaLabel?: string;\n  isLoading: boolean;\n}\n\nexport const ButtonCircle: React.FunctionComponent = () => {\n  const [isUploading, setIsUploading] = useState<boolean>(false);\n\n  const uploadingProps = {} as LoadingPropsType;\n  uploadingProps.spinnerAriaValueText = 'Loading circle variant example';\n  uploadingProps.spinnerAriaLabel = 'Uploading circle variant example data';\n  uploadingProps.isLoading = isUploading;\n\n  return (\n    <Flex columnGap={{ default: 'columnGapSm' }}>\n      <Button isCircle icon={<RhUiAddCircleFillIcon />} aria-label=\"Add primary circle variant example\" />\n      <Button\n        variant=\"secondary\"\n        isCircle\n        icon={<RhUiAddCircleFillIcon />}\n        aria-label=\"Add secondary circle variant example\"\n      />\n      <Button\n        variant=\"tertiary\"\n        isCircle\n        icon={<RhUiAddCircleFillIcon />}\n        aria-label=\"Add tertiary circle variant example\"\n      />\n      <Button\n        variant=\"danger\"\n        isCircle\n        icon={<RhUiAddCircleFillIcon />}\n        aria-label=\"Add danger circle variant example\"\n      />\n      <Button\n        variant=\"warning\"\n        isCircle\n        icon={<RhUiAddCircleFillIcon />}\n        aria-label=\"Add warning circle variant example\"\n      />\n      <Button variant=\"link\" isCircle icon={<RhUiAddCircleFillIcon />} aria-label=\"Add link circle variant example\" />\n      <Button variant=\"control\" isCircle icon={<RhUiCopyFillIcon />} aria-label=\"Copy control circle variant example\" />\n      <Button variant=\"plain\" isCircle icon={<RhMicronsCloseIcon />} aria-label=\"Remove plain circle variant example\" />\n      <Button\n        variant=\"stateful\"\n        isCircle\n        icon={<RhUiNotificationFillIcon />}\n        aria-label=\"Stateful unread circle variant example\"\n      />\n      <Button\n        variant=\"stateful\"\n        state=\"read\"\n        isCircle\n        icon={<RhUiNotificationFillIcon />}\n        aria-label=\"Stateful read circle variant example\"\n      />\n      <Button\n        variant=\"stateful\"\n        state=\"attention\"\n        isCircle\n        icon={<RhUiNotificationFillIcon />}\n        aria-label=\"Stateful attention circle variant example\"\n      />\n      <Button\n        variant=\"plain\"\n        isCircle\n        {...(!isUploading && { 'aria-label': 'Upload circle variant example' })}\n        onClick={() => setIsUploading(!isUploading)}\n        icon={<UploadIcon />}\n        {...uploadingProps}\n      />\n    </Flex>\n  );\n};\n","title":"Circle buttons","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Pass `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isCircle`}
-        </code>
-        {` to a button to modify its styling from simply rounded corners to complete circles. Circle buttons are intended for buttons that only contain an icon and adequate accessible naming.`}
-      </p>
-    </Example>,
-  'Favorite': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Button } from '@patternfly/react-core';\n\nexport const ButtonFavorite: React.FunctionComponent = () => {\n  const [isFavorited, setIsFavorited] = useState(false);\n  const toggleFavorite = () => {\n    setIsFavorited(!isFavorited);\n  };\n  return (\n    <Button\n      variant=\"plain\"\n      aria-label={isFavorited ? 'Favorite example favorited' : 'Favorite example not favorited'}\n      isFavorite\n      isFavorited={isFavorited}\n      onClick={toggleFavorite}\n    />\n  );\n};\n","title":"Favorite","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`You can pass both the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFavorite`}
-        </code>
-        {` and `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant="plain"`}
-        </code>
-        {` properties into the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Button>`}
-        </code>
-        {` to create a favorite button. Passing the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isFavorited`}
-        </code>
-        {` property will determine the current favorited state and update styling accordingly.`}
-      </p>
-    </Example>,
-  'Settings': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\n\nexport const ButtonSettings: React.FunctionComponent = () => (\n  <Flex>\n    <Button isSettings variant=\"plain\" aria-label=\"Settings\" />\n    <Button isSettings variant=\"control\">\n      Settings\n    </Button>\n  </Flex>\n);\n","title":"Settings","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`For a "settings" button with animations on hover and focus, you can pass the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isSettings`}
-        </code>
-        {` property into either a `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant="plain"`}
-        </code>
-        {` or `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`variant="control"`}
-        </code>
-        {` button.`}
-      </p>
-    </Example>,
-  'Hamburger': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Button, Flex } from '@patternfly/react-core';\n\nexport const ButtonHamburger: React.FunctionComponent = () => (\n  <Flex>\n    <Button variant=\"plain\" isExpanded={false} aria-label=\"Hamburger example\" isHamburger />\n    <Button variant=\"plain\" isExpanded={false} aria-label=\"Hamburger example\" isHamburger hamburgerVariant=\"expand\" />\n    <Button variant=\"plain\" isExpanded={true} aria-label=\"Hamburger example\" isHamburger hamburgerVariant=\"collapse\" />\n  </Flex>\n);\n","title":"Hamburger","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`For a "hamburger" button (`}
-        
-        <code {...{"className":"ws-code "}}>
-          {`fa-bars`}
-        </code>
-        {`) that will animate based on the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hamburgerVariant`}
-        </code>
-        {` property, you can pass the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`isHamburger`}
-        </code>
-        {` property. This will render the default icon for a hamburger button, and updating the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`hamburgerVariant`}
-        </code>
-        {` property with a value of either "expand" or "collapse" will change the icon accordingly with an animation on hover and focus.`}
-      </p>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`When used within a PatternFly `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`<Masthead>`}
-        </code>
-        {`, the animations and icon updates will occur automatically. See one of our `}
-        
-        <PatternflyThemeLink {...{"to":"/components/page/react-demos","className":""}}>
-          {`full screen page demos`}
-        </PatternflyThemeLink>
-        {` to see this in action.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Variant examples"])}
-    <table {...{"className":"ws-table  pf-v6-c-table pf-m-grid-lg pf-m-compact","role":"grid"}}>
-      <thead {...{"className":"pf-v6-c-table__thead"}}>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
-            <div {...{"className":""}}>
-              {`Variant`}
-            </div>
-          </th>
-          <th {...{"className":"undefined pf-v6-c-table__th pf-m-wrap","role":"columnheader","scope":"col"}}>
-            <div {...{"className":""}}>
-              {`Description`}
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody {...{"role":"rowgroup","className":"pf-v6-c-table__tbody"}}>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Primary`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Primary buttons are the most visually prominent variant. Use for the most important call to action.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Secondary`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Tertiary`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Danger`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `}
-              <code {...{"className":"ws-code "}}>
-                {`isDanger`}
-              </code>
-              {` property to apply similar styling.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Warning`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Link`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `}
-              <code {...{"className":"ws-code "}}>
-                {`isInline`}
-              </code>
-              {` property.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Plain`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Plain buttons have no styling and are intended to be labeled with icons.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Control`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an `}
-              <PatternflyThemeLink {...{"to":"/components/input-group","className":""}}>
-                {`input group`}
-              </PatternflyThemeLink>
-              {`.`}
-            </div>
-          </td>
-        </tr>
-        <tr {...{"role":"row","className":"pf-v6-c-table__tr"}}>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Variant"}}>
-            <div {...{"className":""}}>
-              {`Stateful`}
-            </div>
-          </td>
-          <td {...{"role":"cell","className":"pf-v6-c-table__td","data-label":"Description"}}>
-            <div {...{"className":""}}>
-              {`Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `}
-              <code {...{"className":"ws-code "}}>
-                {`read`}
-              </code>
-              {`, `}
-              <code {...{"className":"ws-code "}}>
-                {`unread`}
-              </code>
-              {` and `}
-              <code {...{"className":"ws-code "}}>
-                {`attention`}
-              </code>
-              {`.`}
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    {React.createElement(pageData.examples["Disabled buttons"])}
-    {React.createElement(pageData.examples["Small buttons"])}
-    {React.createElement(pageData.examples["Call to action (CTA) buttons"])}
-    {React.createElement(pageData.examples["Block level buttons"])}
-    {React.createElement(pageData.examples["Progress indicators"])}
-    {React.createElement(pageData.examples["Links as buttons"])}
-    {React.createElement(pageData.examples["Inline link as span"])}
-    {React.createElement(pageData.examples["Custom component"])}
-    {React.createElement(pageData.examples["Aria-disabled examples"])}
-    {React.createElement(pageData.examples["Button with count"])}
-    {React.createElement(pageData.examples["Plain with no padding"])}
-    {React.createElement(pageData.examples["Stateful"])}
-    {React.createElement(pageData.examples["Circle buttons"])}
-    <AutoLinkHeader {...{"id":"animated-examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Animated examples`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`The following `}
-      <code {...{"className":"ws-code "}}>
-        {`<Button>`}
-      </code>
-      {` implementations have animations built into them. When using one of the following implementations, the `}
-      <code {...{"className":"ws-code "}}>
-        {`icon`}
-      </code>
-      {` property will be overridden due to the animations needing specific icons internally.`}
-    </p>
-    {React.createElement(pageData.examples["Favorite"])}
-    {React.createElement(pageData.examples["Settings"])}
-    {React.createElement(pageData.examples["Hamburger"])}
-    <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 follow our `}
-      <PatternflyThemeLink {...{"to":"#custom-component","className":""}}>
-        {`custom component example`}
-      </PatternflyThemeLink>
-      {` and pass a callback to the `}
-      <code {...{"className":"ws-code "}}>
-        {`component`}
-      </code>
-      {` property of the `}
-      <code {...{"className":"ws-code "}}>
-        {`Button`}
-      </code>
-      {`:`}
-    </p>
-    <Example {...{"code":"<Button variant=\"link\" component={(props: any) => <Link {...props} to=\"#\" />}>\n  Router link\n</Button>","lang":"nolive","className":""}}>
-    </Example>
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsButtonReactDocs';
-Component.pageData = pageData;
-
-export default Component;