feat: add as and forwardRef to button

packages/react/src/components/button/button.spec.tsx

@@ -60,4 +60,12 @@ describe('Button', () => {
 
     expect(Array.from(button.classList)).toMatchObject(classList);
   });
+
+  it('should render a <a /> when as={"a"} is used', () => {
+    const href = '/my-link'
+    render(<Button as={"a"} href={href}>Link</Button>);
+
+    expect(screen.queryByRole('link')).toBeInTheDocument();
+    expect(screen.getByRole('link')).toHaveAttribute('href', href);
+  });
 });

packages/react/src/components/button/button.tsx

@@ -1,31 +1,38 @@
-import { ButtonHTMLAttributes } from 'react';
+import { createElement } from 'react';
 import clsx from 'clsx';
+import { forwardRef, HTMLProps } from '../../core';
 
 export type ButtonColor = 'primary' | 'danger';
 
 export type ButtonSize = 'small' | 'normal' | 'large';
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends HTMLProps<"button"> {
   color?: ButtonColor;
   outline?: boolean;
   size?: ButtonSize;
 }
 
-export const Button = ({
-  color = 'primary',
-  outline = false,
-  size = 'normal',
-  className,
-  ...buttonProps
-}: ButtonProps) => (
-  <button
-    className={clsx({
-      [className || '']: true,
-      btn: true,
-      [color]: true,
-      [size]: true,
-      outline: outline,
-    })}
-    {...buttonProps}
-  />
-);
+export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
+  const {
+    as,
+    color = 'primary',
+    outline = false,
+    size = 'normal',
+    className,
+    ...buttonProps
+  } = props;
+
+  return createElement(
+    as || 'button', {
+      className: clsx({
+        [className || '']: true,
+        btn: true,
+        [color]: true,
+        [size]: true,
+        outline: outline,
+      }),
+      ref,
+      ...buttonProps,
+    }
+  );
+});