Button.tsx

Button.tsx

基本信息

  • 类型: React 组件 (shadcn/ui)
  • 路径: ./src/components/ui/button.tsx

功能描述

按钮组件，项目中最基础的交互组件。支持多种变体、尺寸和插槽模式。

导出内容

  • Button - 主按钮组件
  • buttonVariants - 按钮样式变体配置

Props 接口

Button

属性类型必填默认值说明
variant`'default' \'destructive' \'outline' \'secondary' \'ghost' \'link'`否'default'按钮变体样式
size`'default' \'sm' \'lg' \'icon' \'icon-sm' \'icon-lg'`否'default'按钮尺寸
asChildboolean否false是否作为子元素渲染
classNamestring否-自定义CSS类名
...propsReact.ComponentProps<'button'>否-button原生属性

变体说明

  • default - 主色填充按钮
  • destructive - 危险红色按钮
  • outline - 边框按钮
  • secondary - 次要背景色按钮
  • ghost - 幽灵按钮（悬停时显示背景）
  • link - 链接样式按钮

尺寸说明

  • default - 默认高度 36px
  • sm - 小尺寸 32px
  • lg - 大尺寸 40px
  • icon - 图标按钮 36x36px
  • icon-sm - 小图标按钮 32x32px
  • icon-lg - 大图标按钮 40x40px

依赖

  • @radix-ui/react-slot - 插槽组件
  • class-variance-authority - 变体样式管理
  • @/lib/utils - 工具函数 (cn)

使用示例

import { Button } from "@/components/ui/button";
import { Loader2 } from "lucide-react";

// 默认按钮
<Button>点击我</Button>

// 带变体
<Button variant="destructive">删除</Button>
<Button variant="outline">取消</Button>
<Button variant="ghost">返回</Button>
<Button variant="link">查看详情</Button>

// 带尺寸
<Button size="sm">小按钮</Button>
<Button size="lg">大按钮</Button>

// 图标按钮
<Button size="icon">
  <Plus className="size-4" />
</Button>

// 加载状态
<Button disabled>
  <Loader2 className="size-4 animate-spin" />
  加载中...
</Button>

// 作为链接
<Button asChild>
  <a href="/dashboard">进入仪表盘</a>
</Button>
← 返回目录