章节
组件
import { ArrowUpIcon } from "lucide-react"
import { Button } from "@/components/ui/button"按钮用来触发一个操作——提交、确认、删除。它基于 Base UI Button 组件构建，并按新粗野主义的配方设计：粗边框、一道硬偏移阴影，以及按下时把按钮压进阴影里的效果。
适合以下场景：
- 表单提交与主要 CTA——
default承担主操作，旁边的一切交给secondary和outline。 - 工具栏与图标操作——
icon尺寸能做出正方形按钮，ButtonGroup再把它们排成分段的一行。 - 破坏性确认——删除和移除用
destructive，通常还会藏在一个对话框后面。
安装#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/button.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json
安装以下依赖项：
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
将以下代码复制并粘贴到您的项目中。
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
cn(
"group/button font-head font-medium inline-flex cursor-pointer items-center justify-center gap-2 rounded whitespace-nowrap select-none transition-all duration-200",
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60",
"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive",
// Icons keep their own size; we only set a default when none is given so
// Neobrutalism's h-4/size-4 icons aren't overridden.
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
),
{
variants: {
variant: {
default:
"border-2 border-black bg-primary text-primary-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-primary-hover hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
secondary:
"border-2 border-black bg-secondary text-secondary-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-secondary-hover hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
destructive:
"border-2 border-black bg-destructive text-destructive-foreground shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-destructive/90 hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
outline:
"border-2 bg-transparent shadow-md transition duration-200 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-lg active:translate-x-1 active:translate-y-1 active:shadow-none",
ghost: "bg-transparent hover:bg-accent",
link: "bg-transparent hover:underline",
},
size: {
default: "px-4 py-1.5 text-base",
xs: "px-2 py-0.5 text-xs",
sm: "px-3 py-1 text-sm",
lg: "px-6 py-2 text-base lg:px-8 lg:py-3 lg:text-lg",
icon: "p-2",
"icon-xs": "p-1",
"icon-sm": "p-1.5",
"icon-lg": "p-3",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
function Button({
className,
variant = "default",
size = "default",
asChild = false,
...props
}: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean
}) {
const Comp = asChild ? Slot.Root : "button"
return (
<Comp
data-slot="button"
data-variant={variant}
data-size={size}
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
)
}
export { Button, buttonVariants }
更新导入路径以匹配您的项目设置。
用法#
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 启用它。
@layer base {
button:not(:disabled),
[role="button"]:not(:disabled) {
cursor: pointer;
}
}示例#
尺寸#
使用 size 属性来改变按钮的尺寸。
import { ArrowUpRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"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 { 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#
在按钮内渲染一个 <Spinner /> 组件以显示加载状态。请记得为该 Spinner 添加 data-icon="inline-start" 或 data-icon="inline-end" 属性以获得正确的间距。
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
Button Group#
要创建按钮组，请使用 ButtonGroup 组件。更多细节请参阅 Button Group 文档。
"use client"
import * as React from "react"作为链接#
您可以使用 buttonVariants 辅助函数让链接看起来像按钮。
请勿使用 <Button render={<a />} nativeButton={false} /> 来制作链接。 Base UI 的 Button 组件总会应用 role="button"，这会覆盖 <a> 元素上语义化的链接角色。请改用 buttonVariants 搭配普通的 <a> 标签。
import { buttonVariants } from "@/components/ui/button"
export function ButtonRender() {RTL#
要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。
"use client"
import { ArrowRightIcon, PlusIcon } from "lucide-react"无障碍#
按钮遵循 WAI-ARIA Button 模式。它默认渲染原生 <button>；当 render 换上别的元素时，Base UI 会补齐 role="button"、tabindex 和键盘激活，让替换后的元素在辅助技术看来依然是个真正的按钮（唯一不该用这个 role 的情形，见上面「作为链接」一节的说明）。
键盘交互：
| 按键 | 操作 |
|---|---|
Tab / Shift + Tab | 把焦点移到按钮上或移开 |
Space / Enter | 激活按钮 |
API 参考#
Button#
Button 组件是对 button 元素的封装，为其添加了多种样式和功能。
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "destructive" | "secondary" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |