扩展 shadcn 默认button。组件位置在 components/share/button.tsx

button.tsx

import { Button as BaseButton, type ButtonProps } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { forwardRef } from "react";

// 扩展原有的ButtonProps类型
export type ShareButtonProps = ButtonProps;

// 创建新的Button组件，继承原有功能
export const Button = forwardRef<HTMLButtonElement, ShareButtonProps>(
  ({ className, ...props }, ref) => (
    <BaseButton
      ref={ref}
      className={cn(
        // 添加默认阴影效果
        "shadow-lg shadow-black/10 hover:shadow-xl hover:shadow-black/20 transition-shadow duration-200",
        className
      )}
      {...props}
    />
  )
);
Button.displayName = "ShareButton";

usage.tsx

import React from 'react'
import {Button} from "@/components/share/button";

export const Usage = () => {
    return (
        <div>
            <Button>Hello World</Button>
        </div>
    )
}