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

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 = ({
-  variant = 'primary',
-  size = 'medium',
-  type = 'button',
-  onClick,
-  children
-}: ButtonProps) => {
-  const classes = useMemo(
-    () => computeClassNames({ size, variant }),
-    [size, variant]
-  );
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'medium',
+      type = 'button',
+      onClick,
+      children
+    },
+    ref
+  ) => {
+    const classes = useMemo(
+      () => computeClassNames({ size, variant }),
+      [size, variant]
+    );
 
-  return (
-    <button className={classes} type={type} onClick={onClick}>
-      {children}
-    </button>
-  );
-};
+    return (
+      <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;