Polymorphic Components & The "as" Prop Pattern

1import React, { ElementType, forwardRef } from 'react';
2
3// Polymorphic props type definition
4type PolymorphicProps<E extends ElementType, P = {}> = P & {
5  as?: E;
6} & Omit<React.ComponentPropsWithRef<E>, keyof P | 'as'>;
7
8interface ButtonBaseProps {
9  variant?: 'primary' | 'secondary' | 'danger';
10  children: React.ReactNode;
11}
12
13// Polymorphic component definition
14export const Button = forwardRef(function Button<E extends ElementType = 'button'>(
15  { as, variant = 'primary', children, ...restProps }: PolymorphicProps<E, ButtonBaseProps>,
16  ref: any
17) {
18  // 1. Dynamic component tag assignment
19  const Component = as || 'button';
20
21  return (
22    <Component
23      ref={ref}
24      className={`btn btn-${variant}`}
25      {...restProps}
26    >
27      {children}
28    </Component>
29  );
30});
31
32// Example Usage:
33export function Navigation() {
34  return (
35    <div className="nav-actions">
36      {/* 1. Renders as native <button> */}
37      <Button variant="primary" onClick={() => alert('Clicked')}>
38        Submit Action
39      </Button>
40
41      {/* 2. Renders as native <a> with href, target */}
42      <Button as="a" href="https://example.com" target="_blank" variant="secondary">
43        External Link
44      </Button>
45    </div>
46  );
47}