From 0aa3a3a8509ba8ef4cb2540af0c519d707e8f1d0 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Wed, 2 Sep 2026 09:23:09 -0400
Subject: [PATCH] draft - Button next with PFE

---
 package.json                                  |   4 +
 .../src/components/ButtonNext/FeltButton.tsx  | 259 ++++++++++++++++++
 .../ButtonNext/examples/FeltButton.md         |  20 ++
 .../examples/FeltButtonVariations.tsx         |  42 +++
 .../src/components/ButtonNext/index.ts        |   1 +
 packages/react-core/src/components/index.ts   |   1 +
 yarn.lock                                     |  99 ++++++-
 7 files changed, 425 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-core/src/components/ButtonNext/FeltButton.tsx
 create mode 100644 packages/react-core/src/components/ButtonNext/examples/FeltButton.md
 create mode 100644 packages/react-core/src/components/ButtonNext/examples/FeltButtonVariations.tsx
 create mode 100644 packages/react-core/src/components/ButtonNext/index.ts

diff --git a/package.json b/package.json
index 41662fc6405..096b74f57b4 100644
--- a/package.json
+++ b/package.json
@@ -125,5 +125,9 @@
   },
   "resolutions": {
     "dompurify": "3.4.13"
+  },
+  "dependencies": {
+    "@lit/react": "^1.0.8",
+    "@patternfly/elements": "^5.0.0"
   }
 }
diff --git a/packages/react-core/src/components/ButtonNext/FeltButton.tsx b/packages/react-core/src/components/ButtonNext/FeltButton.tsx
new file mode 100644
index 00000000000..38ee81c2977
--- /dev/null
+++ b/packages/react-core/src/components/ButtonNext/FeltButton.tsx
@@ -0,0 +1,259 @@
+import { forwardRef, type ReactNode, type Ref } from 'react';
+import type { OUIAProps } from '../../helpers/OUIA/ouia';
+import type { PfV5Button as PfV5ButtonElement } from '@patternfly/elements/pf-v5-button/pf-v5-button.js';
+import { V5Button } from '@patternfly/elements/react/pf-v5-button/pf-v5-button.js';
+import type { BadgeCountObject } from '../Button';
+
+type PfButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'danger'
+  | 'warning'
+  | 'link'
+  | 'plain'
+  | 'control'
+  | 'stateful';
+
+export interface FeltButtonProps extends OUIAProps {
+  children?: ReactNode;
+  className?: string;
+  component?: React.ElementType<any> | React.ComponentType<any>;
+  isClicked?: boolean;
+  isBlock?: boolean;
+  isDisabled?: boolean;
+  isAriaDisabled?: boolean;
+  isLoading?: boolean;
+  spinnerAriaValueText?: string;
+  spinnerAriaLabel?: string;
+  spinnerAriaLabelledBy?: string;
+  inoperableEvents?: string[];
+  isInline?: boolean;
+  isFavorite?: boolean;
+  isFavorited?: boolean;
+  size?: 'default' | 'sm' | 'lg';
+  type?: 'button' | 'submit' | 'reset';
+  variant?: PfButtonVariant;
+  state?: 'read' | 'unread' | 'attention';
+  hasNoPadding?: boolean;
+  iconPosition?: 'start' | 'end' | 'left' | 'right';
+  'aria-label'?: string;
+  icon?: ReactNode | null;
+  tabIndex?: number;
+  isDanger?: boolean;
+  isExpanded?: boolean;
+  isSettings?: boolean;
+  isHamburger?: boolean;
+  hamburgerVariant?: 'expand' | 'collapse';
+  isCircle?: boolean;
+  isDocked?: boolean;
+  isTextExpanded?: boolean;
+  countOptions?: BadgeCountObject;
+  ouiaId?: number | string;
+  ouiaSafe?: boolean;
+  onClick?: React.MouseEventHandler;
+  href?: string;
+  target?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  title?: string;
+  name?: string;
+  value?: string;
+  role?: string;
+  [key: `data-${string}`]: string | undefined;
+  [key: `aria-${string}`]: string | undefined;
+}
+
+const unsupportedProps: Record<string, string> = {
+  component:
+    'The "component" prop is not supported. pf-v5-button renders as a <button> (or <a> for link+href). Use variant="link" with href for anchor behavior.',
+  isAriaDisabled: 'The "isAriaDisabled" prop is not supported. pf-v5-button only supports native disabled.',
+  isClicked: 'The "isClicked" prop is not supported by pf-v5-button.',
+  isFavorite: 'The "isFavorite" prop is not supported by pf-v5-button.',
+  isFavorited: 'The "isFavorited" prop is not supported by pf-v5-button.',
+  isSettings: 'The "isSettings" prop is not supported by pf-v5-button.',
+  isHamburger: 'The "isHamburger" prop is not supported by pf-v5-button.',
+  hamburgerVariant: 'The "hamburgerVariant" prop is not supported by pf-v5-button.',
+  isCircle: 'The "isCircle" prop is not supported by pf-v5-button.',
+  isDocked: 'The "isDocked" prop is not supported by pf-v5-button.',
+  isTextExpanded: 'The "isTextExpanded" prop is not supported by pf-v5-button.',
+  countOptions: 'The "countOptions" prop is not supported by pf-v5-button.',
+  hasNoPadding: 'The "hasNoPadding" prop is not supported by pf-v5-button.',
+  inoperableEvents: 'The "inoperableEvents" prop is not supported. pf-v5-button does not support aria-disabled.',
+  spinnerAriaValueText: 'The "spinnerAriaValueText" prop is not supported. Use the "loading-label" attribute instead.',
+  spinnerAriaLabelledBy: 'The "spinnerAriaLabelledBy" prop is not supported by pf-v5-button.',
+  ouiaId: 'The "ouiaId" prop is not supported by pf-v5-button.',
+  ouiaSafe: 'The "ouiaSafe" prop is not supported by pf-v5-button.',
+  state: 'The "state" prop (stateful variant) is not supported by pf-v5-button.',
+  isExpanded: 'The "isExpanded" prop is not supported by pf-v5-button.'
+};
+
+const warnedProps = new Set<string>();
+
+function warnUnsupported(propName: string) {
+  if (warnedProps.has(propName)) {
+    return;
+  }
+  warnedProps.add(propName);
+  const message = unsupportedProps[propName];
+  if (message) {
+    // eslint-disable-next-line no-console
+    console.warn(`FeltButton: ${message}`);
+  }
+}
+
+function mapSizeToPfe(size?: 'default' | 'sm' | 'lg'): 'small' | 'large' | undefined {
+  switch (size) {
+    case 'sm':
+      return 'small';
+    case 'lg':
+      return 'large';
+    default:
+      return undefined;
+  }
+}
+
+function resolveVariant(
+  variant: PfButtonVariant = 'primary',
+  isDanger?: boolean
+): {
+  pfeVariant: 'primary' | 'secondary' | 'tertiary' | 'control' | 'link';
+  danger: boolean;
+  warning: boolean;
+  plain: boolean;
+} {
+  switch (variant) {
+    case 'danger':
+      return { pfeVariant: 'primary', danger: true, warning: false, plain: false };
+    case 'warning':
+      return { pfeVariant: 'primary', danger: false, warning: true, plain: false };
+    case 'plain':
+      return { pfeVariant: 'primary', danger: false, warning: false, plain: true };
+    case 'stateful':
+      return { pfeVariant: 'primary', danger: false, warning: false, plain: false };
+    default:
+      return {
+        pfeVariant: variant,
+        danger: !!(isDanger && (variant === 'secondary' || variant === 'link')),
+        warning: false,
+        plain: false
+      };
+  }
+}
+
+const FeltButtonBase = (
+  {
+    children = null,
+    className,
+    component,
+    isClicked,
+    isBlock = false,
+    isDisabled = false,
+    isAriaDisabled,
+    isLoading,
+    spinnerAriaValueText,
+    spinnerAriaLabel,
+    spinnerAriaLabelledBy,
+    inoperableEvents,
+    isInline = false,
+    isFavorite,
+    isFavorited,
+    size = 'default',
+    type = 'button',
+    variant = 'primary',
+    state,
+    hasNoPadding,
+    iconPosition = 'start',
+    'aria-label': ariaLabel,
+    icon = null,
+    tabIndex,
+    isDanger,
+    isExpanded,
+    isSettings,
+    isHamburger,
+    hamburgerVariant,
+    isCircle,
+    isDocked,
+    isTextExpanded,
+    countOptions,
+    ouiaId,
+    ouiaSafe,
+    onClick,
+    href,
+    target,
+    name,
+    value,
+    ...rest
+  }: FeltButtonProps,
+  ref: Ref<PfV5ButtonElement> // replaces hidden prop innerRef with native forwardRef
+) => {
+  // Warn for unsupported props (once per prop)
+  const unsupportedValues: Record<string, unknown> = {
+    component,
+    isAriaDisabled,
+    isClicked,
+    isFavorite,
+    isFavorited,
+    isSettings,
+    isHamburger,
+    hamburgerVariant,
+    isCircle,
+    isDocked,
+    isTextExpanded,
+    countOptions,
+    hasNoPadding,
+    inoperableEvents,
+    spinnerAriaValueText,
+    spinnerAriaLabelledBy,
+    ouiaId,
+    ouiaSafe,
+    state,
+    isExpanded
+  };
+  for (const prop of Object.keys(unsupportedProps)) {
+    if (unsupportedValues[prop] !== undefined && unsupportedValues[prop] !== false) {
+      warnUnsupported(prop);
+    }
+  }
+  if (variant === 'stateful') {
+    warnUnsupported('state');
+  }
+
+  const { pfeVariant, danger, warning, plain } = resolveVariant(variant, isDanger);
+  const isIconAtEnd = iconPosition === 'end' || iconPosition === 'right';
+
+  return (
+    <V5Button
+      ref={ref}
+      className={className}
+      variant={pfeVariant}
+      danger={danger}
+      warning={warning}
+      plain={plain}
+      disabled={isDisabled}
+      loading={isLoading || false}
+      inline={isInline}
+      block={isBlock}
+      size={mapSizeToPfe(size)}
+      type={type}
+      label={ariaLabel || undefined}
+      name={name}
+      value={value}
+      href={pfeVariant === 'link' ? href : undefined}
+      target={pfeVariant === 'link' && href ? target : undefined}
+      loading-label={spinnerAriaLabel}
+      tabIndex={tabIndex}
+      onClick={onClick}
+      {...rest}
+    >
+      {/* icon position doesn't work - slot is static inside web component. would need a start and end icon slot to support. */}
+      {icon && !isIconAtEnd && <span slot="icon">{icon}</span>}
+      {children}
+      {icon && isIconAtEnd && <span slot="icon">{icon}</span>}
+    </V5Button>
+  );
+};
+
+export const FeltButton = forwardRef<PfV5ButtonElement, FeltButtonProps>(FeltButtonBase);
+
+FeltButton.displayName = 'FeltButton';
diff --git a/packages/react-core/src/components/ButtonNext/examples/FeltButton.md b/packages/react-core/src/components/ButtonNext/examples/FeltButton.md
new file mode 100644
index 00000000000..57253a66ba3
--- /dev/null
+++ b/packages/react-core/src/components/ButtonNext/examples/FeltButton.md
@@ -0,0 +1,20 @@
+---
+id: Button
+section: components
+source: react-next
+propComponents: ['FeltButton', 'BadgeCountObject']
+ouia: true
+---
+
+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';
+
+## Examples
+
+### Variant examples
+
+```ts file="./FeltButtonVariations.tsx"
+
+```
diff --git a/packages/react-core/src/components/ButtonNext/examples/FeltButtonVariations.tsx b/packages/react-core/src/components/ButtonNext/examples/FeltButtonVariations.tsx
new file mode 100644
index 00000000000..f4748da8ab0
--- /dev/null
+++ b/packages/react-core/src/components/ButtonNext/examples/FeltButtonVariations.tsx
@@ -0,0 +1,42 @@
+import { FeltButton } from '@patternfly/react-core/components/ButtonNext';
+import { Flex } from '@patternfly/react-core';
+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';
+
+export const FeltButtonVariations: React.FunctionComponent = () => (
+  <>
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <FeltButton variant="primary">Primary</FeltButton>
+      <FeltButton variant="secondary">Secondary</FeltButton>
+      <FeltButton variant="secondary" isDanger>
+        Danger Secondary
+      </FeltButton>
+      <FeltButton variant="tertiary">Tertiary</FeltButton>
+      <FeltButton variant="danger">Danger</FeltButton>
+      <FeltButton variant="warning">Warning</FeltButton>
+    </Flex>
+    <br />
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <FeltButton variant="link" icon={<RhUiAddCircleFillIcon />}>
+        Link
+      </FeltButton>
+      <FeltButton variant="link" icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
+        Link
+      </FeltButton>
+      <FeltButton variant="link" isInline>
+        Inline link
+      </FeltButton>
+      <FeltButton variant="link" isDanger>
+        Danger link
+      </FeltButton>
+      <FeltButton variant="plain" aria-label="Action" icon={<RhMicronsCloseIcon />} />
+    </Flex>
+    <br />
+    <Flex columnGap={{ default: 'columnGapSm' }}>
+      <FeltButton variant="control">Control</FeltButton>
+      <FeltButton variant="control" aria-label="Copy" icon={<RhUiCopyFillIcon />} />
+    </Flex>
+  </>
+);
diff --git a/packages/react-core/src/components/ButtonNext/index.ts b/packages/react-core/src/components/ButtonNext/index.ts
new file mode 100644
index 00000000000..81430498d6c
--- /dev/null
+++ b/packages/react-core/src/components/ButtonNext/index.ts
@@ -0,0 +1 @@
+export * from './FeltButton';
diff --git a/packages/react-core/src/components/index.ts b/packages/react-core/src/components/index.ts
index 9ba1b78ec46..c1335c07ca9 100644
--- a/packages/react-core/src/components/index.ts
+++ b/packages/react-core/src/components/index.ts
@@ -12,6 +12,7 @@ export * from './Banner';
 export * from './Brand';
 export * from './Breadcrumb';
 export * from './Button';
+export * from './ButtonNext';
 export * from './CalendarMonth';
 export * from './Card';
 export * from './Checkbox';
diff --git a/yarn.lock b/yarn.lock
index 224de12951b..5ef44ae620e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4127,6 +4127,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lit-labs/ssr-dom-shim@npm:^1.5.0":
+  version: 1.6.0
+  resolution: "@lit-labs/ssr-dom-shim@npm:1.6.0"
+  checksum: 10c0/deffcfd765d268820beef600a1c1cf9d3cf1a5cb4bbe7e80843796ff33d1a122f4e5651ef4a44b33d36e5fa6538e6ee87a95b9d40b4a26cabf3c35b45194c87a
+  languageName: node
+  linkType: hard
+
+"@lit/context@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@lit/context@npm:1.1.6"
+  dependencies:
+    "@lit/reactive-element": "npm:^1.6.2 || ^2.1.0"
+  checksum: 10c0/203f761eda19c8b37d77f01d9a0148535c5b28c47b76e28b321cb6e5ed0546c45332512e68b1647ce92ca67690d8c66de31972ec115410b080d69fa25a5d86f3
+  languageName: node
+  linkType: hard
+
+"@lit/react@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "@lit/react@npm:1.0.8"
+  peerDependencies:
+    "@types/react": 17 || 18 || 19
+  checksum: 10c0/18bf3eb6584fa989e0ad40988b349a4401da1cecd5bf1c6edfc1c5caed80037852a4ebe5685b04941e5b28ccf93e740676dae32773d7ae44b1479b96538392b1
+  languageName: node
+  linkType: hard
+
+"@lit/reactive-element@npm:^1.6.2 || ^2.1.0, @lit/reactive-element@npm:^2.1.0":
+  version: 2.1.2
+  resolution: "@lit/reactive-element@npm:2.1.2"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": "npm:^1.5.0"
+  checksum: 10c0/557069ce6ebbbafb1140e1e0a25ce73d3501bf455cda231d42bb131baa9065c54b6b7ca1655507eede397decd7ddde16c84192cb72a07d4edf41d54e07725933
+  languageName: node
+  linkType: hard
+
 "@mdx-js/util@npm:1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/util@npm:1.6.22"
@@ -5039,6 +5073,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@patternfly/elements@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@patternfly/elements@npm:5.0.0"
+  dependencies:
+    "@lit/context": "npm:^1.1.6"
+    "@patternfly/icons": "npm:^1.0.3"
+    "@patternfly/pfe-core": "npm:^6.0.0"
+    lit: "npm:^3.3.2"
+    tslib: "npm:^2.8.1"
+  checksum: 10c0/dfd036442222ecb9e58edfec9496133e9bf9c17e37d722bf2b4d5e1272bc9b303bac7632abb7b5281f90e7cbe1dc26e4b316834d0d875948770290afa92810b2
+  languageName: node
+  linkType: hard
+
+"@patternfly/icons@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "@patternfly/icons@npm:1.0.3"
+  checksum: 10c0/5300949eaf296df095e4650095519a61570f0a56dc81a3abd6ef1d2cec9cd1b3aa179e2675b361d86ed7299e908ecc1269cff9992cbe6df6b681cdbac3a4604d
+  languageName: node
+  linkType: hard
+
 "@patternfly/patternfly-a11y@npm:5.2.1":
   version: 5.2.1
   resolution: "@patternfly/patternfly-a11y@npm:5.2.1"
@@ -5077,6 +5131,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@patternfly/pfe-core@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@patternfly/pfe-core@npm:6.0.0"
+  dependencies:
+    "@lit/context": "npm:^1.1.6"
+    lit: "npm:^3.3.2"
+  checksum: 10c0/429fe4297232795bebc1d839653f11c9fc4ea059c7f301f7f8fc68d93c1be8418035208a4683de3c090e47651ace8a3666ce610f5a097d10ac31937215b31712
+  languageName: node
+  linkType: hard
+
 "@patternfly/react-charts@workspace:^, @patternfly/react-charts@workspace:packages/react-charts":
   version: 0.0.0-use.local
   resolution: "@patternfly/react-charts@workspace:packages/react-charts"
@@ -5263,7 +5327,9 @@ __metadata:
     "@babel/preset-typescript": "npm:^7.28.5"
     "@eslint/compat": "npm:^1.4.1"
     "@eslint/js": "npm:^9.32.0"
+    "@lit/react": "npm:^1.0.8"
     "@octokit/rest": "npm:^21.1.1"
+    "@patternfly/elements": "npm:^5.0.0"
     "@rhds/icons": "npm:^2.1.0"
     "@rollup/plugin-commonjs": "npm:^26.0.3"
     "@rollup/plugin-node-resolve": "npm:^15.3.1"
@@ -7136,7 +7202,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/trusted-types@npm:^2.0.7":
+"@types/trusted-types@npm:^2.0.2, @types/trusted-types@npm:^2.0.7":
   version: 2.0.7
   resolution: "@types/trusted-types@npm:2.0.7"
   checksum: 10c0/4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c
@@ -16611,6 +16677,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lit-element@npm:^4.2.0":
+  version: 4.2.2
+  resolution: "lit-element@npm:4.2.2"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": "npm:^1.5.0"
+    "@lit/reactive-element": "npm:^2.1.0"
+    lit-html: "npm:^3.3.0"
+  checksum: 10c0/114ab5837f1f9e03a30b1ed1c055fa0e31f01e444464e5ab0453ef88be12d778508235533267c42614d323e3048ee58f865b5c612948a53bd6219abca404c710
+  languageName: node
+  linkType: hard
+
+"lit-html@npm:^3.3.0":
+  version: 3.3.3
+  resolution: "lit-html@npm:3.3.3"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.2"
+  checksum: 10c0/84e57314412ff385cc67fc482d26b77057370e2cfe3c6495cc45f692bdad840d5ed0519ddddcfae1d043bb098c66daa7e807593d5a21ac72094da14274497879
+  languageName: node
+  linkType: hard
+
+"lit@npm:^3.3.2":
+  version: 3.3.3
+  resolution: "lit@npm:3.3.3"
+  dependencies:
+    "@lit/reactive-element": "npm:^2.1.0"
+    lit-element: "npm:^4.2.0"
+    lit-html: "npm:^3.3.0"
+  checksum: 10c0/11b6175ebffce92f4cf835ddd8a198d49707c27f34b0a7c538d2cb294f6c2fb7ff40aabd3589fcf0c2ed162404faaf2bb7c966fad9024bb9e02d013e2d5aa0b5
+  languageName: node
+  linkType: hard
+
 "load-json-file@npm:6.2.0":
   version: 6.2.0
   resolution: "load-json-file@npm:6.2.0"