按钮

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

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button
Copy

用法

🌐 Usage

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

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

Cursor

Tailwind v4 已经将按钮组件从 cursor: pointer 切换 到 cursor: default。

🌐 Tailwind v4 switched from cursor: pointer to cursor: default for the button component.

如果你想保留 cursor: pointer 行为，请将以下代码添加到你的 CSS 文件中：

🌐 If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

Copy@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

示例

🌐 Examples

大小

🌐 Size

使用 size 属性来更改按钮的大小。

🌐 Use the size prop to change the size of the button.

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

默认

🌐 Default

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

export function ButtonDefault() {

大纲

🌐 Outline

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

export function ButtonOutline() {

辅助

🌐 Secondary

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

export function ButtonSecondary() {

Ghost

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

export function ButtonGhost() {

破坏性

🌐 Destructive

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

export function ButtonDestructive() {

链接

🌐 Link

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

export function ButtonLink() {

图标

🌐 Icon

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

带有图标

🌐 With Icon

记得在图标上添加 data-icon="inline-start" 或 data-icon="inline-end" 属性以获得正确的间距。

🌐 Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

import { Button } from "@/components/ui/button"
import { IconGitBranch, IconGitFork } from "@tabler/icons-react"

圆形的

🌐 Rounded

使用 rounded-full 类使按钮圆角。

🌐 Use the rounded-full class to make the button rounded.

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

旋转器

🌐 Spinner

在按钮内部渲染一个 <Spinner /> 组件以显示加载状态。记得为旋转器添加 data-icon="inline-start" 或 data-icon="inline-end" 属性以获得正确的间距。

🌐 Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

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

按钮组

🌐 Button Group

要创建按钮组，请使用 ButtonGroup 组件。有关更多详细信息，请参阅 按钮组 文档。

🌐 To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.

"use client"

import * as React from "react"

链接

🌐 Link

你可以使用 buttonVariants 辅助工具让链接看起来像一个按钮。

🌐 You can use the buttonVariants helper to make a link look like a button.

不要将 <Button render={<a />} nativeButton={false} /> 用于链接。 Base UI Button 组件始终会应用 role="button"，这会覆盖 <a> 元素上的语义链接角色。请改用 buttonVariants 搭配普通的 <a> 标签。

"use client"

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

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import { Button } from "@/examples/base/ui-rtl/button"

API参考

🌐 API Reference

按钮

🌐 Button

Button 组件是 button 元素的一个封装器，添加了多种样式和功能。

🌐 The Button component is a wrapper around the button element that adds a variety of styles and functionality.