120k
New

按钮

PreviousNext

显示一个按钮或外观类似按钮的组件。

Base UIReact AriaRadix UI
import { ArrowUpIcon } from "lucide-react"

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

安装

pnpm dlx shadcn@latest add button

用法

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

光标

Tailwind v4 将按钮组件的 cursor: pointer 切换为 cursor: default。

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

你也可以在项目设置期间使用 npx shadcn@latest init --pointer 启用此功能。

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

尺寸

使用 size 属性更改按钮的尺寸。

import { ArrowUpRightIcon } from "lucide-react"

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

默认

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

export function ButtonDefault() {

大纲

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

export function ButtonOutline() {

次要

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

export function ButtonSecondary() {

幽灵

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

export function ButtonGhost() {

破坏性

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

export function ButtonDestructive() {

链接

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

export function ButtonLink() {

图标

import { CircleFadingArrowUpIcon } from "lucide-react"

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

带图标

请记得为图标添加 data-icon="inline-start" 或 data-icon="inline-end" 属性，以实现正确的间距。

import { IconGitBranch, IconGitFork } from "@tabler/icons-react"

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

圆角

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

import { ArrowUpIcon } from "lucide-react"

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

加载指示器

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

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

按钮组

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

"use client"

import * as React from "react"

作为链接

你可以使用 buttonVariants 辅助函数，让链接看起来像按钮。

不要将 <Button> 用于链接。 React Aria 的 Button 组件始终会应用 role="button"，这会覆盖 <a> 元素上的语义链接角色。请改用 buttonVariants 和普通的 <a> 标签。

"use client"

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

RTL

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

"use client"

import { ArrowRightIcon, PlusIcon } from "lucide-react"

API 参考

Button

Button 组件是对 button 元素的封装，增加了多种样式和功能。

PropTypeDefault
variant"default" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"

有关更多信息，请参阅 React Aria 文档。