feat(button.tsx): Added as prop to button component

app/docs/components/button/button.mdx

@@ -1,6 +1,7 @@
 import { CodePreview } from '~/app/components/code-preview';
 import { Button, theme } from '~/src';
 import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
+import Link from 'next/link';
 
 The button component is a common UI component found on the web that allows users to trigger certain actions on your website such as submitting a form, navigating to a new page, or downloading a file.
 
@@ -203,6 +204,37 @@ You can disable the button by adding the `disabled` property to the `<Button>` c
   <Button disabled>Disabled button</Button>
 </CodePreview>
 
+## Override Button base component
+
+The `as` prop provides you the ability to transform the `<Button />` component into another component or HTML element. This prop accepts a string representing an HTML tag or a functional React component.
+
+<CodePreview
+  importExternal="import Link from 'next/link';"
+  title="Button as other elements"
+  importFlowbiteReact="Button"
+  code={`<div className="flex flex-wrap items-center gap-2">
+  <div>
+    <Button as="span">Span Button</Button>
+  </div>
+  <div>
+    <Button as={Link} href="#">
+      Next Link Button
+    </Button>
+  </div>
+</div>`}
+>
+  <div className="flex flex-wrap items-center gap-2">
+    <div>
+      <Button as="span">Span Button</Button>
+    </div>
+    <div>
+      <Button as={Link} href="#">
+        Next Link Button
+      </Button>
+    </div>
+  </div>
+</CodePreview>
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

src/components/Button/Button.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { PropsWithChildren } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Flowbite } from '../../';
 import { Button } from './Button';
@@ -98,10 +99,51 @@ describe('Components / Button', () => {
       expect(button()).toHaveTextContent('Something or other');
     });
 
-    it('should render an anchor `<a>` when `href=".."`', () => {
-      render(<Button href="#" label="Something or other" />);
+    describe('`as` and `href` props', () => {
+      it('should render an anchor `<a>` when `href=".."`', () => {
+        render(<Button href="#" label="Something or other" />);
 
-      expect(buttonLink()).toBeInTheDocument();
+        expect(buttonLink()).toBeInTheDocument();
+      });
+
+      it('should render an anchor `<a>` when `href=".."` even though `as` is defined', () => {
+        render(<Button href="#" as="label" label="Something or other" />);
+
+        expect(buttonLink()).toBeInTheDocument();
+      });
+
+      it('should render tag element defined in `as`', () => {
+        render(
+          <ul>
+            <Button as="li" label="Something or other" />
+          </ul>,
+        );
+
+        expect(buttonListItem()).toBeInTheDocument();
+      });
+
+      it('should render component defined in `as`', () => {
+        const CustomComponent = ({ children }: PropsWithChildren) => {
+          return <li>{children}</li>;
+        };
+
+        render(
+          <ul>
+            <Button as={CustomComponent} label="Something or other" />
+          </ul>,
+        );
+
+        const button = buttonListItem();
+
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveTextContent('Something or other');
+      });
+
+      it('should render as button when `as`={null}', () => {
+        render(<Button as={null} label="Something or other" />);
+
+        expect(button()).toBeInTheDocument();
+      });
     });
   });
 
@@ -313,4 +355,6 @@ const button = () => screen.getByRole('button');
 
 const buttonLink = () => screen.getByRole('link');
 
+const buttonListItem = () => screen.getByRole('listitem');
+
 const buttons = () => screen.getAllByRole('button');

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ComponentProps, type ReactNode } from 'react';
+import { createElement, forwardRef, type ComponentProps, type ElementType, type ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
 import type {
   DeepPartial,
@@ -66,6 +66,7 @@ export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'r
   fullSized?: boolean;
   gradientDuoTone?: keyof ButtonGradientDuoToneColors;
   gradientMonochrome?: keyof ButtonGradientColors;
+  as?: ElementType;
   href?: string;
   target?: string;
   isProcessing?: boolean;
@@ -79,7 +80,9 @@ export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'r
   theme?: DeepPartial<FlowbiteButtonTheme>;
 }
 
-const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+interface Props extends ButtonProps, Record<string, unknown> {}
+
+const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
   (
     {
       children,
@@ -92,6 +95,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
       processingSpinner: SpinnerComponent = <Spinner />,
       gradientDuoTone,
       gradientMonochrome,
+      as: Component = 'button',
       href,
       label,
       outline = false,
@@ -106,17 +110,18 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
     const { buttonGroup: groupTheme, button: buttonTheme } = useTheme().theme;
     const theme = mergeDeep(buttonTheme, customTheme);
 
-    const isLink = typeof href !== 'undefined';
-    const Component = isLink ? 'a' : 'button';
+    const BaseComponent = href ? 'a' : Component ?? 'button';
+
     const theirProps = props as object;
 
-    return (
-      <Component
-        disabled={disabled}
-        href={href}
-        type={isLink ? undefined : 'button'}
-        ref={ref as never}
-        className={twMerge(
+    return createElement(
+      BaseComponent,
+      {
+        disabled,
+        href,
+        type: Component === 'button' ? 'button' : undefined,
+        ref: ref as never,
+        className: twMerge(
           theme.base,
           disabled && theme.disabled,
           !gradientDuoTone && !gradientMonochrome && theme.color[color],
@@ -127,32 +132,31 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
           fullSized && theme.fullSized,
           groupTheme.position[positionInGroup],
           className,
+        ),
+        ...theirProps,
+      },
+      <span
+        className={twMerge(
+          theme.inner.base,
+          theme.outline[outline ? 'on' : 'off'],
+          theme.outline.pill[outline && pill ? 'on' : 'off'],
+          theme.size[size],
+          outline && !theme.outline.color[color] && theme.inner.outline,
+          isProcessing && theme.isProcessing,
+          theme.inner.position[positionInGroup],
         )}
-        {...theirProps}
       >
-        <span
-          className={twMerge(
-            theme.inner.base,
-            theme.outline[outline ? 'on' : 'off'],
-            theme.outline.pill[outline && pill ? 'on' : 'off'],
-            theme.size[size],
-            outline && !theme.outline.color[color] && theme.inner.outline,
-            isProcessing && theme.isProcessing,
-            theme.inner.position[positionInGroup],
+        <>
+          {isProcessing && <span className={twMerge(theme.spinnerSlot)}>{SpinnerComponent}</span>}
+          {typeof children !== 'undefined' ? (
+            children
+          ) : (
+            <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
+              {isProcessing ? processingLabel : label}
+            </span>
           )}
-        >
-          <>
-            {isProcessing && <span className={twMerge(theme.spinnerSlot)}>{SpinnerComponent}</span>}
-            {typeof children !== 'undefined' ? (
-              children
-            ) : (
-              <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
-                {isProcessing ? processingLabel : label}
-              </span>
-            )}
-          </>
-        </span>
-      </Component>
+        </>
+      </span>,
     );
   },
 );