109k
新建

按钮

上一个下一个

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

Radix UIBase UI
Radix UI - shadcn/ui 组件库
import { Button } from "@/components/ui/button"
import { ArrowUpIcon } from "lucide-react"

安装

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 文件中添加以下代码

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

示例

尺寸 (Size)

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

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

默认

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

export function ButtonDefault() {

大纲

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() {

破坏性按钮

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

export function ButtonDestructive() {

链接

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

export function ButtonLink() {

图标

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

带图标

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

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

圆角

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

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

加载指示器 (Spinner)

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

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

按钮组

要创建按钮组，请使用 ButtonGroup 组件。详情请参阅 按钮组 (Button Group) 文档。

"use client"

import * as React from "react"

链接

你可以在 <Button /> 上使用 asChild 属性，让其他组件看起来像按钮。这是一个看起来像按钮的链接示例。

import Link from "next/link"
import { Button } from "@/components/ui/button"

RTL (从右至左)

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

"use client"

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

API 参考

按钮

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

属性类型默认
variant (变体)"default" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"
size (尺寸)"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"
asChild (作为子元素)布尔值false