按钮

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

安装以下依赖：

npm install @base-ui/react

将以下代码复制到你的项目中。

View complete source: components/ui/button.tsx

根据项目配置更新导入路径。

用法

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

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

光标

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

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

You can also enable this during project setup with JGuang UI Registry.

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

尺寸

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

默认

描边

次要

幽灵

危险操作

链接

图标

带图标

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

圆角

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

加载指示器

Render a `` 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.

按钮组

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

作为链接

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

Do not use } nativeButton={false} /> for links. The Base UI Button component always applies role="button", which overrides the semantic link role on <a> elements. Use buttonVariants with a plain <a> tag instead.

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

Button

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

Prop	Type	Default
variant	"default" | "outline" | "ghost" | "destructive" | "secondary" | "link"	"default"
size	"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"	"default"