From 5bb757a151ec0dd477a29cbe781fc392be66f2fb Mon Sep 17 00:00:00 2001
From: Eric Anderson <eanders@microsoft.com>
Date: Thu, 12 Oct 2023 16:59:51 -0700
Subject: [PATCH] react-common: support for button children (#9719)

---
 react-common/components/controls/Button.tsx | 23 ++++++++++++---------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/react-common/components/controls/Button.tsx b/react-common/components/controls/Button.tsx
index 914a9ee1a9cd..eeee5ab0f21e 100644
--- a/react-common/components/controls/Button.tsx
+++ b/react-common/components/controls/Button.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
-import { classList, ControlProps, fireClickOnEnter } from "../util";
+import { classList, ContainerProps, fireClickOnEnter } from "../util";
 
-export interface ButtonViewProps extends ControlProps {
+export interface ButtonViewProps extends ContainerProps {
     buttonRef?: (ref: HTMLButtonElement) => void;
     title: string;
     label?: string | JSX.Element;
@@ -56,7 +56,8 @@ export const Button = (props: ButtonProps) => {
         hardDisabled,
         href,
         target,
-        tabIndex
+        tabIndex,
+        children
     } = props;
 
     let {
@@ -101,13 +102,15 @@ export const Button = (props: ButtonProps) => {
             aria-setsize={ariaSetSize}
             aria-describedby={ariaDescribedBy}
             aria-selected={ariaSelected}>
-                <span className="common-button-flex">
-                    {leftIcon && <i className={leftIcon} aria-hidden={true}/>}
-                    <span className="common-button-label">
-                        {label}
-                    </span>
-                    {rightIcon && <i className={"right " + rightIcon} aria-hidden={true}/>}
-                </span>
+                {(leftIcon || rightIcon || label) && (
+                    <span className="common-button-flex">
+                        {leftIcon && <i className={leftIcon} aria-hidden={true}/>}
+                        <span className="common-button-label">
+                            {label}
+                        </span>
+                        {rightIcon && <i className={"right " + rightIcon} aria-hidden={true}/>}
+                    </span>)}
+                {children}
         </button>
     );
 }
\ No newline at end of file