文档
按钮
按钮
显示一个按钮或看起来像按钮的组件。
安装
pnpm dlx shadcn@latest add button
用法
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>链接
您可以使用 buttonVariants 辅助函数来创建一个看起来像按钮的链接。
import { buttonVariants } from "@/components/ui/button"<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>或者，您可以设置 asChild 参数并嵌套链接组件。
<Button asChild>
<Link href="/login">Login</Link>
</Button>示例
主要
次要
破坏性
轮廓
幽灵
链接
图标
带图标
加载中
作为子组件
更新日志
2024-10-16 图标的类
在按钮中添加了 gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 以自动设置按钮内部图标的样式。
将以下类添加到您的 button.tsx 文件中的 cva 调用中。
button.tsx
const buttonVariants = cva(
"inline-flex ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
)