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

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

@@ -0,0 +1,826 @@
+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;