第三章：基础组件

3.1 按钮组件

基本用法

Shadcn的按钮组件(Button)是构建用户界面的核心元素之一，提供开箱即用的交互功能。通过简单的导入即可使用：

import { Button } from "@/components/ui/button";

function MyComponent() {
  return <Button>点击我</Button>;
}

按钮变体

Shadcn预设了多种视觉变体，通过variant属性控制：

  • default: 默认中性风格
  • destructive: 警示性操作（红色系）
  • outline: 线框风格
  • ghost: 无背景的极简风格
  • link: 文本链接样式
<Button variant="destructive">删除数据</Button>
<Button variant="outline">导出文件</Button>

尺寸控制

通过size属性调整按钮尺寸：

  • sm: 小尺寸(32px高度)
  • default: 默认尺寸(40px高度)
  • lg: 大尺寸(48px高度)
<Button size="sm">紧凑按钮</Button>
<Button size="lg">突出按钮</Button>

状态处理

  1. 禁用状态：添加disabled属性
    <Button disabled>不可操作</Button>
  2. 加载状态：配合loading状态使用
    <Button isLoading={true}>提交中...</Button>

图标集成

支持通过icon插槽添加SVG图标：

<Button>
  <DownloadIcon className="mr-2" />
  下载
</Button>

高级特性

  • 组合按钮：使用ButtonGroup容器
  • 全宽按钮：添加fullWidth属性
  • 自定义事件：标准React事件绑定

最佳实践

  1. 主操作按钮使用variant="default"
  2. 次要操作使用outline变体
  3. 危险操作必须使用destructive
  4. 避免在同一视图中使用超过3种变体
Last Updated::