按钮

安装

¥Installation

pnpm dlx shadcn@latest add button

用法

¥Usage

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

<Button variant="outline">Button</Button>

链接

¥Link

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

¥You can use the buttonVariants helper to create a link that looks like a button.

import { buttonVariants } from "@/components/ui/button"

<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>

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

¥Alternatively, you can set the asChild parameter and nest the link component.

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

示例

¥Examples

主要

¥Primary

辅助

¥Secondary

破坏性

¥Destructive

大纲

¥Outline

Ghost

链接

¥Link

图标

¥Icon

带有图标

¥With Icon

加载

¥Loading

作为子级

¥As Child

更新日志

¥Changelog

2024-10-16 图标类

¥2024-10-16 Classes for icons

在按钮中添加了 gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0，以自动设置按钮内的图标样式。

¥Added gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 to the button to automatically style icon inside the button.

将以下类添加到你的 button.tsx 文件中的 cva 调用。

¥Add the following classes to the cva call in your button.tsx file.

const buttonVariants = cva(
  "inline-flex ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
)