Docs
按钮

按钮

显示一个按钮或一个看起来像按钮的组件。

安装

pnpm dlx shadcn@latest add button

用法

import { Button } from "@/components/ui/button"
<Button variant="outline">按钮</Button>

链接

你可以使用 buttonVariants 辅助函数创建一个看起来像按钮的链接。

import { buttonVariants } from "@/components/ui/button"
<Link className={buttonVariants({ variant: "outline" })}>点击这里</Link>

或者，你可以设置 asChild 参数并嵌套链接组件。

<Button asChild>
  <Link href="/login">登录</Link>
</Button>

示例

主要

次要

破坏性

轮廓

幽灵

链接

图标

带图标

加载中

作为子组件

Login

更新日志

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"
)
BreadcrumbCalendar