chore(ui-components): minor adjustments in Button component (#45480)

.eslintrc.json

@@ -34,7 +34,8 @@
     "import/named": 2,
     "import/no-named-as-default": 0,
     "import/no-named-as-default-member": 0,
-    "import/order": 2
+    "import/order": 2,
+    "react/prop-types": "off"
   },
   "overrides": [
     {

tools/ui-components/src/button/button.stories.tsx

@@ -5,7 +5,20 @@ import { Button, ButtonProps } from '.';
 
 const story = {
   title: 'Example/Button',
-  component: Button
+  component: Button,
+  parameters: {
+    controls: {
+      include: ['children', 'variant', 'size']
+    }
+  },
+  argTypes: {
+    variant: {
+      options: ['primary', 'danger']
+    },
+    size: {
+      options: ['small', 'medium', 'large']
+    }
+  }
 };
 
 const Template: Story<ButtonProps> = args => {

tools/ui-components/src/button/button.tsx

@@ -45,21 +45,28 @@ const computeClassNames = ({
   return classNames.join(' ');
 };
 
-export const Button = ({
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
       variant = 'primary',
       size = 'medium',
       type = 'button',
       onClick,
       children
-}: ButtonProps) => {
+    },
+    ref
+  ) => {
     const classes = useMemo(
       () => computeClassNames({ size, variant }),
       [size, variant]
     );
 
     return (
-    <button className={classes} type={type} onClick={onClick}>
+      <button ref={ref} className={classes} type={type} onClick={onClick}>
         {children}
       </button>
     );
-};
+  }
+);
+
+Button.displayName = 'Button';

tools/ui-components/src/button/types.ts

@@ -4,7 +4,8 @@ export type ButtonVariant = 'primary' | 'danger';
 
 export type ButtonSize = 'small' | 'medium' | 'large';
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   variant?: ButtonVariant;
   size?: ButtonSize;